<!-- eslint-disable vue/require-component-is -->
<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div
    :class="routerType == false ? 'main-container' : 'main-containers'"
    style="background-color: #f0f2f5"
  >
    <div style="display: flex; justify-content: space-between">
      <div style="display: flex; align-items: center">
        <div id="popup" style="height: 35px">
          <a-input-search
            placeholder="请输入设备"
            search-button
            v-model="cardNum"
            style="width: 350px; height: 35px"
            @press-enter="cardSeachFn"
            button-text="确认查询"
            @focus="tipFn"
            @search="cardSeachFn"
          >
            <template #prefix>
              <img style="width: 17px; height: 17px" src="@/assets/she.png" alt="" />
            </template>
            <template #suffix>
              <div style="display: flex; align-items: center">
                <img
                  style="width: 15px; height: 15px; cursor: pointer"
                  @click="paste"
                  src="@/assets/paste.png"
                  alt=""
                />
                <img
                  style="
                    width: 15px;
                    height: 15px;
                    margin-left: 5px;
                    margin-right: 5px;
                    cursor: pointer;
                  "
                  @click="cardNum = ''"
                  src="@/assets/close.png"
                  alt=""
                />
              </div>
            </template>
          </a-input-search>
          <div v-if="showTip" class="contex-menu-wrapper"
            ><a-table
              :data="loaclCard"
              :pagination="{ defaultPageSize: 5 }"
              page-position="bottom"
              @cell-click="cell"
            >
              <template #columns>
                <a-table-column title="卡号" :width="210" data-index="card" />
                <a-table-column title="操作时间" data-index="time" />
                <a-table-column title="操作" data-index="address">
                  <template #cell="{ record }">
                    <a-button
                      @click.stop="useCommon.copy(record.card)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      >复制</a-button
                    >
                    <a-button
                      @click.stop="del(record.card)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      >删除</a-button
                    >
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </div>
        </div>
        <!-- <a-button type="primary" style="margin-left: 10px" status="success" 
          >智能检测</a-button
        > -->
        <div v-if="cardDetail.id" @click="openDetection" style="height: 35px">
          <div
            v-if="
              (!cardDetail.exceptionType &&
                cardDetail.officialRealName == 0 &&
                cardDetail.free > 0 &&
                cardDetail.firstPayTime &&
                cardDetail.state == 0) ||
              (!cardDetail.exceptionType &&
                cardDetail.officialRealName == 0 &&
                !cardDetail.free &&
                cardDetail.firstPayTime &&
                cardDetail.state == 0)
            "
            style="color: #3491fa; line-height: 35px; padding: 0 10px"
            >检测结果一切正常!</div
          >

          <div
            v-else
            class="namesa"
            style="color: red; display: flex; align-items: center; height: 35px"
          >
            <a-tooltip content="智能检测结果可能存在延迟，建议刷新卡成功后再看检测结果">
              <span style="display: flex; align-items: center; cursor: pointer"
                ><img
                  style="width: 15px; height: 15px; margin: 0 10px"
                  src="@/assets/red.png"
                  alt=""
                />
                检测结果:
                <span v-if="cardDetail.state != 0">当前卡号状态异常</span>
                <span v-else-if="!cardDetail.firstPayTime">当前卡号未充值套餐</span>
                <span v-else-if="cardDetail.officialRealName !== 0">当前卡号未官方实名</span>
                <span v-else-if="cardDetail.free <= 0 && cardDetail.firstPayTime"
                  >可用流量已用尽</span
                >
                <span v-else-if="cardDetail.free <= 0">当前流量已用完</span>
                <span v-else-if="cardDetail.chong">{{ cardDetail.chong }}</span>
                <span v-else-if="cardDetail.disconnectionId">达量断网停机</span>
                <span v-else-if="cardDetail.free">
                  <span v-if="cardDetail.free + cardDetail.used <= 0 && !cardDetail.firstPayTime"
                    >当前卡号未充值本月套餐</span
                  >
                  <span
                    v-else-if="
                      cardDetail.state == 4 &&
                      !cardDetail.exceptionType &&
                      cardDetail.firstPayTime &&
                      cardDetail.free > 0
                    "
                    >网络异常</span
                  >
                </span>
                <span v-else-if="!cardDetail.free">
                  <span v-if="cardDetail.used <= 0 && !cardDetail.firstPayTime"
                    >当前卡号未充值本月套餐</span
                  >
                  <span
                    v-else-if="
                      cardDetail.state == 4 && !cardDetail.exceptionType && cardDetail.firstPayTime
                    "
                    >网络异常</span
                  >
                </span></span
              >
            </a-tooltip>
          </div>
        </div>
        <div style="display: flex; margin-left: 20px">
          <div style="display: flex; align-items: center; margin-right: 20px"
            ><img
              style="width: 15px; height: 15px; margin-right: 10px"
              src="@/assets/she.png"
              alt=""
            />设备状态：<span style="color: #3491fa" v-if="cardDetail.wifiDevice.deviceState == 1"
              >在线</span
            ><span style="color: red" v-else>离线</span></div
          >
          <div style="display: flex; align-items: center; margin-right: 20px"
            ><img
              style="width: 15px; height: 15px; margin-right: 10px"
              src="@/assets/xinhao.png"
              alt=""
            />设备信号：<span style="color: #3491fa">{{
              cardDetail.wifiDevice.rssi ? cardDetail.wifiDevice.rssi : 0
            }}</span>
          </div>
          <div style="display: flex; align-items: center; margin-right: 20px"
            ><img
              style="width: 15px; height: 15px; margin-right: 10px"
              src="@/assets/dianliang.png"
              alt=""
            />设备电量：<span
              style="color: #3491fa"
              v-if="cardDetail.wifiDevice.electricQuantity"
              >{{ cardDetail.wifiDevice.electricQuantity + '%' }}</span
            ><span style="color: red" v-else>未知</span></div
          >
          <div style="display: flex; align-items: center; margin-right: 20px"
            ><img
              style="width: 15px; height: 15px; margin-right: 10px"
              src="@/assets/error.png"
              alt=""
            />异常终端：<span
              style="color: #3491fa"
              v-if="cardDetail.wifiDevice.abnormalState == true"
              >正常</span
            ><span style="color: red" v-else>异常</span></div
          >
          <div style="display: flex; align-items: center; margin-right: 20px"
            ><img
              style="width: 15px; height: 15px; margin-right: 10px"
              src="@/assets/xiansu.png"
              alt=""
            />设备限速：</div
          >
        </div>
      </div>
      <!-- <div
        @click="routerOneCard"
        style="background-color: #e5e6eb; padding: 5px; border-radius: 5px"
      >
    
        <img
          v-if="routerType == false"
          style="width: 25px; height: 25px"
          src="@/assets/quan.png"
          alt=""
        />
        <img
          v-if="routerType == true"
          style="width: 25px; height: 25px"
          src="@/assets/suo.png"
          alt=""
        />
      </div> -->
    </div>
    <div v-show="type == '0'">
      <div class="detail">
        <div class="timeBox">
          <div class="time-box-item">
            <img class="img" src="@/assets/one/wei.png" alt="" />
            <div class="text">
              <div :class="cardDetail.ipAddress ? 'blue' : 'red'"
                >位置：
                <span v-if="cardDetail.ipAddress">
                  <a-tooltip :content="cardDetail.ip">
                    <span>{{ cardDetail.ipAddress }}</span>
                  </a-tooltip>
                </span>
                <span v-else>- - -</span>
              </div>
              <div class="time"
                >首次：<span v-if="cardDetail.firstLoginTime"
                  >{{ cardDetail.firstLoginTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.firstLoginTime) }}</span
                >
                <span v-else>- - -</span>
              </div>
              <div class="time"
                >最近：<span v-if="cardDetail.lastLoginTime"
                  >{{ cardDetail.lastLoginTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.lastLoginTime) }}</span
                >
                <span v-else>- - -</span></div
              >
            </div>
          </div>
          <div class="time-box-item">
            <img class="img" src="@/assets/one/meal.png" alt="" />
            <div class="text">
              <div :class="cardDetail.firstPayTime ? 'blue' : 'red'"
                >套餐：<span v-if="cardDetail.firstPayTime"
                  >已充值 / {{ cardDetail.payNumber }}
                </span>
                <span v-else>未充值</span>
              </div>
              <div class="time"
                >首次：<span v-if="cardDetail.firstPayTime"
                  >{{ cardDetail.firstPayTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.firstPayTime) }}</span
                >
                <span v-else>- - -</span>
              </div>
              <div class="time"
                >最近：<span v-if="cardDetail.lastPayTime"
                  >{{ cardDetail.lastPayTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.lastPayTime) }}</span
                >
                <span v-else>- - -</span></div
              >
            </div>
          </div>
          <div class="time-box-item">
            <img class="img" src="@/assets/one/balance.png" alt="" />
            <div class="text">
              <div :class="cardDetail.balance && cardDetail.balance > 0 ? 'blue' : 'red'"
                >余额：<span v-if="cardDetail.balance && cardDetail.balance > 0">
                  {{ cardDetail.balance }} 元 </span
                ><span v-else>0 元</span></div
              >
              <div class="time"
                >首次：<span v-if="cardDetail.firstPayBalanceTime"
                  >{{ cardDetail.firstPayBalanceTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.firstPayBalanceTime) }}</span
                >
                <span v-else>- - -</span>
              </div>
              <div class="time"
                >最近：<span v-if="cardDetail.lastPayBalanceTime"
                  >{{ cardDetail.lastPayBalanceTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.lastPayBalanceTime) }}</span
                >
                <span v-else>- - -</span></div
              >
            </div>
          </div>
          <div class="time-box-item">
            <img class="img" src="@/assets/one/coupon.png" alt="" />
            <div class="text">
              <div
                :class="
                  cardDetail.firstPayCouponTime && cardDetail.seriesCouponOrder ? 'blue' : 'red'
                "
                >券包：<span v-if="!cardDetail.firstPayCouponTime">未充值</span>
                <span v-else-if="cardDetail.firstPayCouponTime && cardDetail.seriesCouponOrder">
                  {{ cardDetail.seriesCouponOrder.couponCount }}张 /
                  {{ cardDetail.seriesCouponOrder.couponAllAmount }}元
                </span>
                <span v-else>0张 / 0元</span></div
              >
              <div class="time"
                >首次：<span v-if="cardDetail.firstPayCouponTime"
                  >{{ cardDetail.firstPayCouponTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.firstPayCouponTime) }}</span
                >
                <span v-else>- - -</span>
              </div>
              <div class="time"
                >最近：<span v-if="cardDetail.lastPayCouponTime"
                  >{{ cardDetail.lastPayCouponTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.lastPayCouponTime) }}</span
                >
                <span v-else>- - -</span></div
              >
            </div>
          </div>
          <div class="time-box-item">
            <img class="img" src="@/assets/one/vip.png" alt="" />
            <div class="text">
              <div
                :class="
                  cardDetail.speedVipLastEndTime &&
                  useCommon.checkTimePeriodStatus(cardDetail.speedVipLastEndTime) == 1
                    ? 'blue'
                    : 'red'
                "
                >会员：<span v-if="!cardDetail.speedVipLastEndTime">未充值</span
                ><span
                  v-else-if="
                    cardDetail.speedVipLastEndTime &&
                    useCommon.checkTimePeriodStatus(cardDetail.speedVipLastEndTime) == 1
                  "
                  >已充值 </span
                ><span
                  v-else-if="
                    cardDetail.speedVipLastEndTime &&
                    useCommon.checkTimePeriodStatus(cardDetail.speedVipLastEndTime) == 2
                  "
                  >已过期
                </span>
              </div>
              <div class="time"
                >首次：<span v-if="cardDetail.firstPayVipTime"
                  >{{ cardDetail.firstPayVipTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.firstPayVipTime) }}</span
                >
                <span v-else>- - -</span>
              </div>
              <div class="time"
                >最近：<span v-if="cardDetail.lastPayVipTime"
                  >{{ cardDetail.lastPayVipTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.lastPayVipTime) }}</span
                >
                <span v-else>- - -</span></div
              >
            </div>
          </div>
          <div class="time-box-item" style="margin-top: 20px">
            <img class="img" src="@/assets/sysname.png" alt="" />
            <div class="text" style="width: 100%">
              <div style="display: flex; justify-content: space-between; width: 100%">
                <div :class="cardDetail.upstreamFlow > 0 ? 'blue' : 'red'"
                  >上游已用：{{
                    cardDetail.upstreamFlow > 0
                      ? Math.floor((cardDetail.upstreamFlow / 1024) * 100) / 100
                      : '0'
                  }}G
                </div>
                <a-spin :loading="refLoad1">
                  <img class="img" @click="RefreshFn(0)" src="@/assets/shuaxin.png" alt="" />
                </a-spin>
              </div>
              <div class="time"
                >入库：<span v-if="cardDetail.createTime"
                  >{{ cardDetail.createTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.createTime) }}</span
                >
                <span v-else>- - -</span>
              </div>
              <div class="time"
                >刷新：<span v-if="cardDetail.flowRefreshTime"
                  >{{ cardDetail.flowRefreshTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.flowRefreshTime) }}</span
                >
                <span v-else>- - -</span></div
              >
            </div>
          </div>
          <div class="time-box-item" style="margin-top: 20px">
            <img class="img" src="@/assets/state1.png" alt="" />
            <div class="text" style="width: 100%">
              <div style="display: flex; justify-content: space-between; width: 100%">
                <div :class="cardDetail.state == 0 ? 'blue' : 'red'"
                  >卡板状态：<span v-if="cardDetail.id" :color="cardDetail.stateName.color">{{
                    cardDetail.stateName.name
                  }}</span>
                  <span v-else>- - -</span>
                </div>
                <div style="color: red">
                  <span v-if="cardDetail.id && cardDetail.state !== 0" @click="startFn">复机</span>
                  <span v-if="cardDetail.id" style="margin: 0 10px" @click="resetLinkFn"
                    >重置网络</span
                  >
                  <a-spin :loading="refLoad2">
                    <img class="img" @click="RefreshFn(1)" src="@/assets/shuaxin.png" alt="" />
                  </a-spin>
                </div>
              </div>
              <div class="time"
                >激活：<span v-if="cardDetail.firstPayTime"
                  >{{ cardDetail.firstPayTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.firstPayTime) }}</span
                >
                <span v-else>- - -</span>
              </div>
              <div class="time"
                >刷新：<span v-if="cardDetail.stateRefreshTime"
                  >{{ cardDetail.stateRefreshTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.stateRefreshTime) }}</span
                >
                <span v-else>- - -</span></div
              >
            </div>
          </div>
          <div class="time-box-item" style="margin-top: 20px">
            <img class="img" src="@/assets/offname1.png" alt="" />
            <div class="text" style="width: 100%">
              <div style="display: flex; justify-content: space-between; width: 100%">
                <div :class="cardDetail.officialRealName == 0 ? 'blue' : 'red'"
                  >官方实名：<span v-if="cardDetail.officialRealName == 0">已实名</span>
                  <span v-else-if="cardDetail.officialRealName == 1">未实名</span>
                  <span v-else>未知</span>
                </div>
                <div>
                  <img
                    class="img"
                    @click="realNameFno"
                    style="margin-right: 10px"
                    src="@/assets/dele11.png"
                    alt=""
                  />

                  <a-spin :loading="refLoad3">
                    <img class="img" @click="RefreshFn(2)" src="@/assets/shuaxin.png" alt="" />
                  </a-spin>
                </div>
              </div>
              <div class="time"
                >实名：<span v-if="cardDetail.realNameTime"
                  >{{ cardDetail.realNameTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.realNameTime) }}</span
                >
                <span v-else>- - -</span>
              </div>
              <div class="time"
                >刷新：<span v-if="cardDetail.realNameRefreshTime"
                  >{{ cardDetail.realNameRefreshTime }}→
                  {{ useCommon.getTimeDifference(cardDetail.realNameRefreshTime) }}</span
                >
                <span v-else>- - -</span></div
              >
            </div>
          </div>
          <div class="time-box-item" style="margin-top: 20px">
            <img class="img" src="@/assets/sysname1.png" alt="" />
            <div class="text" style="width: 100%">
              <div style="display: flex; justify-content: space-between; width: 100%">
                <div :class="cardDetail.cardRealName ? 'blue' : 'red'"
                  >系统实名： <span v-if="cardDetail.cardRealName">已实名</span>
                  <span v-else>未实名</span>
                </div>
                <img class="img" @click="realNameFns" src="@/assets/dele11.png" alt="" />
                <!-- <div></div> -->
              </div>
              <div class="time"
                >信息：<span v-if="cardDetail.cardRealName"
                  >{{
                    cardDetail.cardRealName.name
                      ? cardDetail.cardRealName.name + ' → ' + cardDetail.cardRealName.phone
                      : cardDetail.cardRealName.phone
                      ? cardDetail.cardRealName.phone
                      : '- - -'
                  }}
                </span>
                <span v-else>- - -</span>
              </div>
              <div class="time"
                >时间：<span v-if="cardDetail.cardRealName"
                  >{{ cardDetail.cardRealName.time }}→
                  {{ useCommon.getTimeDifference(cardDetail.cardRealName.time) }}</span
                >
                <span v-else>- - -</span></div
              >
            </div>
          </div>
          <div class="time-box-item" style="margin-top: 20px">
            <img class="img" src="@/assets/username1.png" alt="" />
            <div class="text" style="width: 100%">
              <div style="display: flex; justify-content: space-between; width: 100%">
                <div
                  class="blue"
                  style="width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
                  >所属客户：{{ cardDetail.user ? cardDetail.user.userName : '管理员' }}
                </div>
                <div>
                  <img
                    class="img"
                    @click="openRetrieve"
                    style="margin-right: 10px"
                    src="@/assets/userUp.png"
                    alt=""
                  />
                  <img class="img" @click="delimitation" src="@/assets/userDown.png" alt="" />
                </div>
              </div>
              <div class="time"
                >代理等级：<span v-if="cardDetail.user"
                  >ID: {{ cardDetail.userId }} → {{ cardDetail.user.grade }}级代理</span
                >
                <span v-else>- - -</span>
              </div>

              <div
                class="time"
                style="width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
                >代理层级：<span v-if="cardDetail.user"
                  >系统<span
                    v-for="item in cardDetail.user.parent"
                    :key="item.id"
                    style="margin-right: 5px"
                  >
                    → {{ item.userName }}</span
                  ><span> → {{ cardDetail.user.userName }} </span></span
                >
                <span v-else>管理员 </span></div
              >
            </div>
          </div>
        </div>
      </div>
      <div class="detail">
        <div style="display: flex">
          <div style="margin-right: 20px; width: calc(100% - (100% - 80px) / 5)">
            <a-descriptions
              bordered
              :column="4"
              align="left"
              style="background-color: var(--color-bg-2); border-radius: 10px; margin-bottom: 20px"
            >
              <a-descriptions-item label="卡板ID">
                <div style="display: flex; align-items: center">
                  <img
                    class="imgsa"
                    v-if="cardDetail.series.operator == 0"
                    src="@/assets/yd.png"
                    alt=""
                  />
                  <img
                    class="imgsa"
                    v-if="cardDetail.series.operator == 1"
                    src="@/assets/lt.png"
                    alt=""
                  />
                  <img
                    class="imgsa"
                    v-if="cardDetail.series.operator == 2"
                    src="@/assets/dx.png"
                    alt=""
                  />
                  <img
                    class="imgsa"
                    v-if="cardDetail.series.operator == 3"
                    src="@/assets/gd.png"
                    alt=""
                  /><span v-if="cardDetail.id" @click="useCommon.copy(cardDetail.id)">
                    {{ cardDetail.id }}
                  </span>
                  <span v-else>- - -</span>
                  <span
                    v-if="cardDetail.id"
                    style="margin-left: 5px; color: #3491fa; cursor: pointer"
                    @click="jiaozhnegFn"
                    >修改</span
                  >
                </div>
              </a-descriptions-item>
              <a-descriptions-item label="接口卡号">
                <span v-if="cardDetail.apiCard" @click="useCommon.copy(cardDetail.apiCard)">
                  {{ cardDetail.apiCard }}
                </span>
                <span v-else>- - -</span>
              </a-descriptions-item>
              <a-descriptions-item label="完整卡号"
                ><span v-if="cardDetail.iccid" @click="useCommon.copy(cardDetail.iccid)">
                  {{ cardDetail.iccid }}
                </span>
                <span v-else>- - -</span>
              </a-descriptions-item>
              <a-descriptions-item label="显示卡号"
                ><span v-if="cardDetail.card" @click="useCommon.copy(cardDetail.card)">
                  {{ cardDetail.card }}
                </span>
                <span v-else>- - -</span>
              </a-descriptions-item>
              <a-descriptions-item label="实名卡号"
                ><span
                  v-if="cardDetail.realNameCard"
                  @click="useCommon.copy(cardDetail.realNameCard)"
                >
                  {{ cardDetail.realNameCard }}</span
                >
                <span v-else>- - -</span></a-descriptions-item
              >
              <a-descriptions-item label="IMEI"
                ><span v-if="cardDetail.imei" @click="useCommon.copy(cardDetail.imei)">
                  {{ cardDetail.imei }}</span
                >
                <span v-else>- - -</span></a-descriptions-item
              >

              <a-descriptions-item label="所属渠道">
                <span @click="channelRoute" v-if="cardDetail.series.channel.id">
                  {{ cardDetail.series.channel.api ? 'API' : '流量池' }} →
                  {{ cardDetail.series.channel.name }}</span
                >
              </a-descriptions-item>
              <a-descriptions-item label="所属系列"
                ><span @click="seriesRoute" v-if="cardDetail.seriesId"
                  >ID: {{ cardDetail.seriesId }} → {{ cardDetail.series.name }}</span
                >
                <span
                  v-if="cardDetail.id"
                  style="margin-left: 5px; color: #3491fa; cursor: pointer"
                  @click="openParameter"
                  >修改</span
                ></a-descriptions-item
              >

              <a-descriptions-item label="异常类型">
                <a-tag v-if="cardDetail.errorName" color="red">{{ cardDetail.errorName }}</a-tag>
                <a-tag v-else color="arcoblue">正常</a-tag></a-descriptions-item
              >

              <a-descriptions-item label="在线状态">
                <a-tag color="blue" v-if="cardDetail.online == 0">在线</a-tag>
                <a-tag v-else-if="cardDetail.online == 1">离线</a-tag>
                <a-tag v-else>未知</a-tag>
                <span
                  style="margin-left: 5px; color: #3491fa; cursor: pointer"
                  v-if="cardDetail.id"
                  @click="onlineFn"
                  >刷新</span
                >
              </a-descriptions-item>
              <a-descriptions-item label="自动续费"
                ><a-tag color="blue" @click="openAutomatic" v-if="cardDetail.setMealId">开启</a-tag>
                <a-tag @click="openAutomatic" v-else>关闭</a-tag></a-descriptions-item
              >
              <a-descriptions-item label="限速状态"
                ><a-tag color="red" v-if="cardDetail.speedLimitTagId">已限速</a-tag>
                <a-tag v-else>未限速</a-tag></a-descriptions-item
              >
              <a-descriptions-item label="注销状态">
                <a-tag color="red" v-if="cardDetail.cancellationGroupId">已注销</a-tag>
                <a-tag v-else>未注销</a-tag
                ><span
                  v-if="cardDetail.id"
                  style="margin-left: 5px; color: #3491fa; cursor: pointer"
                  @click="cancelCFns"
                  >修改</span
                >
                <span
                  v-if="cardDetail.id && cardDetail.cancellationGroupId"
                  style="margin-left: 5px; color: #3491fa; cursor: pointer"
                  @click="delOneClass"
                  >移除</span
                >
              </a-descriptions-item>
              <a-descriptions-item label="换卡状态">
                <a-tag color="red" v-if="cardDetail.changeGroupId">已换卡</a-tag>
                <a-tag v-else>未换卡</a-tag>
                <span
                  v-if="cardDetail.id"
                  style="margin-left: 5px; color: #3491fa; cursor: pointer"
                  @click="changeCardCFns"
                  >修改</span
                >
                <span
                  v-if="cardDetail.id && cardDetail.changeGroupId"
                  style="margin-left: 5px; color: #3491fa; cursor: pointer"
                  @click="delOneChange"
                  >移除</span
                >
              </a-descriptions-item>
              <a-descriptions-item label="转移时间"
                ><span v-if="cardDetail.transferTime"
                  >{{ cardDetail.transferTime }} →
                  {{ useCommon.getTimeDifference(cardDetail.transferTime) }}</span
                ><span v-else>- - -</span>
              </a-descriptions-item>
              <a-descriptions-item label="卡板备注">
                <span class="input">
                  <a-input
                    :style="{ background: 'none', paddingLeft: '0px' }"
                    v-model="cardRemarks"
                    @blur="remarkAdd"
                  />
                </span>
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions
              bordered
              :column="4"
              align="left"
              style="
                margin-top: 10px;
                background-color: var(--color-bg-2);
                border-radius: 10px;
                margin-bottom: 20px;
              "
            >
              <a-descriptions-item label="总流量">
                <span v-if="cardDetail.free != undefined">
                  {{ Math.floor(((cardDetail.used + cardDetail.free) / 1024) * 100) / 100 }}G
                  <span @click="lishiFn" style="margin-left: 5px; color: #3491fa; cursor: pointer"
                    >历史</span
                  >
                </span>
                <span v-else-if="!cardDetail.free && cardDetail.id">
                  无限
                  <span @click="lishiFn" style="margin-left: 5px; color: #3491fa; cursor: pointer"
                    >历史</span
                  ></span
                >
                <span v-else>- - -</span>
              </a-descriptions-item>
              <a-descriptions-item label="已用流量"
                ><span v-if="cardDetail.used != undefined"
                  >{{ Math.floor((cardDetail.used / 1024) * 100) / 100 }}G
                  <span v-if="cardDetail.free">
                    /
                    {{
                      Math.floor((cardDetail.used / (cardDetail.used + cardDetail.free)) * 10000) /
                      100
                    }}%
                  </span>
                </span>
                <span v-else> - - -</span>
                <a-button
                  @click="openFlow(cardDetail.id)"
                  style="padding: 0px 4px"
                  type="text"
                  size="small"
                  >矫正流量</a-button
                ></a-descriptions-item
              >
              <a-descriptions-item label="剩余流量"
                ><span v-if="cardDetail.free != undefined"
                  >{{ Math.floor((cardDetail.free / 1024) * 100) / 100 }}G
                  <span v-if="cardDetail.free">
                    /
                    {{
                      (10000 -
                        Math.floor(
                          (cardDetail.used / (cardDetail.used + cardDetail.free)) * 10000
                        )) /
                      100
                    }}%
                  </span>
                </span>
                <span v-else-if="!cardDetail.free && cardDetail.id"> 无限 </span>
                <span v-else>- - -</span>
              </a-descriptions-item>
              <a-descriptions-item label="到期时间">
                <span v-if="time">{{ time }}</span>
                <span v-else>- - -</span></a-descriptions-item
              >
              <a-descriptions-item label="真实总量">
                <span v-if="cardDetail.free != undefined && cardDetail.bai > 0">
                  {{
                    Math.floor(
                      ((cardDetail.realUsed + cardDetail.free * cardDetail.bai) / 1024) * 100
                    ) / 100
                  }}G</span
                >
                <span v-else-if="cardDetail.free != undefined && cardDetail.bai == 0">
                  {{ Math.floor(((cardDetail.realUsed + 0) / 1024) * 100) / 100 }}G</span
                >
                <span v-else> - - -</span></a-descriptions-item
              >
              <a-descriptions-item label="真实已用"
                ><span v-if="cardDetail.realUsed != undefined"
                  >{{ Math.floor((cardDetail.realUsed / 1024) * 100) / 100 }}G

                  <span v-if="cardDetail.free">
                    /
                    {{
                      Math.floor((cardDetail.used / (cardDetail.used + cardDetail.free)) * 10000) /
                      100
                    }}%
                  </span></span
                >
                <span v-else> - - -</span></a-descriptions-item
              >

              <!-- <a-descriptions-item label="一级客户">{{ cardDetail.method }}</a-descriptions-item> -->
              <a-descriptions-item label="真实剩余">
                <span v-if="cardDetail.free != undefined && cardDetail.bai > 0"
                  >{{ Math.floor(((cardDetail.free * cardDetail.bai) / 1024) * 100) / 100 }}G
                  <span v-if="cardDetail.free">
                    /
                    {{
                      (10000 -
                        Math.floor(
                          (cardDetail.used / (cardDetail.used + cardDetail.free)) * 10000
                        )) /
                      100
                    }}%
                  </span></span
                >
                <span v-else-if="cardDetail.free != undefined && cardDetail.bai == 0">0G</span>
                <span v-else> - - -</span>
              </a-descriptions-item>
              <a-descriptions-item label="最后到期">
                <span v-if="cardDetail.expirationTime">{{ cardDetail.expirationTime }}</span>
                <span v-else>- - -</span>
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions
              bordered
              :column="4"
              align="left"
              style="margin-top: 10px; background-color: var(--color-bg-2); border-radius: 10px"
            >
              <a-descriptions-item label="设备ID">
                {{ cardDetail.wifiDevice.id }}
              </a-descriptions-item>
              <a-descriptions-item label="设备号">
                {{ cardDetail.wifiDevice.equipmentNo }}</a-descriptions-item
              >
              <a-descriptions-item label="设备渠道"
                >{{ cardDetail.wifiDevice.wifiDeviceChannel.name }}
              </a-descriptions-item>
              <a-descriptions-item label="设备方案">
                {{ cardDetail.wifiDevice.wifiDeviceScheme.name }}</a-descriptions-item
              >
              <a-descriptions-item label="上报时间">
                {{
                  cardDetail.wifiDevice.reportingTime
                    ? cardDetail.wifiDevice.reportingTime
                    : '- - -'
                }}</a-descriptions-item
              >
              <a-descriptions-item label="上线时间">{{
                cardDetail.wifiDevice.onlineTime ? cardDetail.wifiDevice.onlineTime : '- - -'
              }}</a-descriptions-item>

              <!-- <a-descriptions-item label="一级客户">{{ cardDetail.method }}</a-descriptions-item> -->
              <a-descriptions-item label="切卡时间">
                {{
                  cardDetail.wifiDevice.switchingTime
                    ? cardDetail.wifiDevice.switchingTime
                    : '- - -'
                }}
              </a-descriptions-item>
              <a-descriptions-item label="设备备注">
                {{ cardDetail.wifiDevice.remarks ? cardDetail.wifiDevice.remarks : '- - -' }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
          <div style="width: calc((100% - 80px) / 5)">
            <div
              style="
                display: flex;
                width: 100%;
                border-radius: 10px;
                background-color: #ffffff;
                height: calc(100% - 110px);
                padding: 15px 10px;
              "
            >
            </div>
            <div
              style="
                display: flex;
                width: 100%;
                border-radius: 10px;
                background-color: #ffffff;
                margin-top: 20px;
                height: 90px;
                padding: 15px 10px;
                position: relative;
              "
            >
              <div
                ><img style="width: 20px; height: 20px" src="@/assets/wifi.png" alt="" /><div
                  style="font-size: 9px"
                >
                  {{
                    cardDetail.wifiDevice.wifiBand ? cardDetail.wifiDevice.wifiBandName : '暂无'
                  }}</div
                ></div
              >
              <div style="margin-left: 10px">
                <div
                  >WIFI名称：{{
                    cardDetail.wifiDevice.wifiName ? cardDetail.wifiDevice.wifiName : '暂无'
                  }}</div
                >
                <div
                  >WIFI密码：{{
                    cardDetail.wifiDevice.wifiPassword ? cardDetail.wifiDevice.wifiPassword : '暂无'
                  }}</div
                >
                <div style="font-size: 11px"
                  >连接数量：{{ cardDetail.wifiDevice.connectionsNumber }}
                  <span style="margin-left: 10px"
                    >隐藏：
                    <a-switch
                      size="mini"
                      @change="changeWifiHide"
                      v-model="cardDetail.wifiDevice.hide"
                      :checked-value="true"
                      :unchecked-value="false"
                    />
                  </span>
                </div>
                <div></div>
              </div>

              <div
                style="
                  position: absolute;
                  top: 0;
                  right: 0;
                  width: 40px;
                  height: 25px;
                  font-size: 11px;
                  text-align: center;
                  color: #fff;
                  background-color: #3491fa;
                  line-height: 25px;
                  border-radius: 0px 10px 0 10px;
                "
                >{{ cardDetail.wifiDevice.wifiState ? '正常' : '关闭' }}</div
              >
              <div
                style="
                  position: absolute;
                  bottom: 15px;
                  right: 0;
                  width: 65px;
                  height: 26px;
                  font-size: 11px;
                  text-align: center;
                  color: #fff;
                  background-color: #3491fa;
                  line-height: 26px;
                  border-radius: 13px 0 0 13px;
                  cursor: pointer;
                "
                @click="openWifi(cardDetail.wifiDevice)"
                >设置WIFI</div
              >
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px">
        <a-table
          :columns="cardColumns"
          :pagination="false"
          :data="cardDetail.wifiDevice.cards"
          :scroll="{ x: 200 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          style="margin-bottom: 20px"
        >
          <template #columns>
            <a-table-column
              v-for="item of cardColumns"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :ellipsis="true"
              :tooltip="true"
              :fixed="item.fixed"
            >
              <template v-if="item.key === 'card'" #cell="{ record }">
                <div class="ba">
                  <img class="imgsa" v-if="record.operator == 0" src="@/assets/yd.png" alt="" />
                  <img class="imgsa" v-if="record.operator == 1" src="@/assets/lt.png" alt="" />
                  <img class="imgsa" v-if="record.operator == 2" src="@/assets/dx.png" alt="" />
                  <img class="imgsa" v-if="record.operator == 3" src="@/assets/gd.png" alt="" />
                  <span>{{ record.iccid }}</span>
                </div>
              </template>
              <template v-if="item.key === 'imei'" #cell="{ record }">
                <span>{{ record.imei ? record.imei : '- - -' }}</span>
              </template>
              <template v-if="item.key === 'cardState1'" #cell="{ record }">
                <span v-if="record.cardState == '使用中'" style="color: #3491fa">{{
                  record.cardState
                }}</span>
                <span v-else>{{ record.cardState }}</span>
                <span v-if="record.cardState1 !== ''">/</span>
                <span v-if="record.cardState1 !== ''" style="color: #3491fa">{{
                  record.cardState1
                }}</span>
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <span>{{ record.stateName.name }}</span>
              </template>
              <template v-if="item.key === 'use'" #cell="{ record }">
                <span>{{ useCommon.numbers1(record.upstreamFlow) }}</span>
              </template>
              <template v-if="item.key === 'time'" #cell="{ record }">
                <span v-if="record.online == 0">在线</span>
                <span v-else-if="record.online == 1">离线</span>
                <span v-else>未知</span>
              </template>
              <template v-if="item.key === 'officialRealName'" #cell="{ record }">
                <span color="blue" v-if="record.officialRealName == 0">已实名</span>
                <span v-else-if="record.officialRealName == 1">未实名</span>
                <span v-else>未知</span>
              </template>
              <template v-if="item.key === 'officialRealName'" #cell="{ record }">
                <span color="blue" v-if="record.officialRealName == 0">已实名</span>
                <span v-else-if="record.officialRealName == 1">未实名</span>
                <span v-else>未知</span>
              </template>
              <template v-if="item.key === 'realNameRefreshTime'" #cell="{ record }">
                <span v-if="record.realNameRefreshTime">{{ record.realNameRefreshTime }}</span>
                <span v-else>- - -</span>
              </template>
              <template v-if="item.key === 'flowRefreshTime'" #cell="{ record }">
                <span v-if="record.flowRefreshTime">{{ record.flowRefreshTime }}</span>
                <span v-else>- - -</span>
              </template>

              <template v-if="item.key === 'action'" #cell="{ record }">
                <a-button size="small" type="text" class="butten" @click="RefreshFns(record, '')">
                  刷新
                </a-button>
                <a-button size="small" type="text" class="butten" @click="stopFns(record)">
                  停机
                </a-button>
                <a-button size="small" type="text" class="butten" @click="startFns(record)">
                  复机
                </a-button>
                <a-button size="small" type="text" class="butten" @click="changeFns(record.slot)">
                  切换
                </a-button>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
      <div class="detail" style="margin-top: 20px">
        <div style="display: flex; justify-content: space-between">
          <div class="box">
            <a-radio-group
              style="background-color: #ffffff; height: 35px"
              v-model="orderType"
              type="button"
            >
              <a-radio value="0">套餐订单</a-radio>
              <a-radio value="1" @click="balanceOrderFn(1)">余额订单</a-radio>
              <a-radio value="2" @click="balanceRealFn(1)">实名订单</a-radio>
              <a-radio value="3" @click="changeOrderdoRefresh(1)">邮费订单</a-radio>
              <a-radio value="4" @click="couponOrderdoRefresh(1)">券包订单</a-radio>
              <a-radio value="5" @click="vipOrderdoRefresh(1)">会员订单</a-radio>
              <a-radio value="6" @click="rebateRefresh(1)">返佣明细</a-radio>
              <a-radio value="7" @click="balanceRefresh(1)">余额明细</a-radio>
            </a-radio-group>
          </div>
          <div style="display: flex; align-items: center; height: 35px">
            <a-checkbox-group
              v-if="orderType == '0' && cardDetail.series.channel.api == false"
              v-model="checkedValue"
              @change="changes"
            >
              <a-checkbox :value="1" disabled>生效中({{ cardDetail.number1 }})</a-checkbox>
              <a-checkbox :value="0">待生效({{ cardDetail.number3 }})</a-checkbox>
              <a-checkbox :value="2">已失效({{ cardDetail.number2 }})</a-checkbox>
            </a-checkbox-group>
            <a-checkbox-group
              v-if="orderType == '0' && cardDetail.series.channel.api == true"
              v-model="checkedValue"
              @change="changes"
            >
              <a-checkbox :value="3">全部订单({{ cardDetail.cardOrders.length }})</a-checkbox>
            </a-checkbox-group>
            <!-- <div style="cursor: pointer" @click="change">
              {{ show == true ? '收起' : '展开'
              }}<icon-caret-down
                v-if="show == true"
                style="margin-left: 5px; color: var(--color-neutral-7)"
              /><icon-caret-left
                v-if="show == false"
                style="margin-left: 5px; color: var(--color-neutral-7)"
              />
            </div> -->
          </div>
        </div>
        <div v-if="show == true">
          <a-table
            v-if="orderType == '0'"
            style="border-radius: 10px"
            :loading="tables.tableLoading"
            :bordered="{ wrapper: true, cell: tables.bordered }"
            :stripe="(tables.striped as boolean)"
            :data="dataList"
            :pagination="false"
            :row-key="rowKey"
            :scroll="{ x: 1500 }"
            @row-click="handleRowClick"
            :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          >
            <template #columns>
              <a-table-column
                v-for="item of tableColumns.list"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
                :fixed="item.fixed"
                :ellipsis="true"
                :tooltip="true"
              >
                <template v-if="item.key === 'setMealName'" #cell="{ record }">
                  <div class="ba">
                    <img
                      v-if="record.payType === 0"
                      src="@/assets/order/y.jpg"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <img
                      v-if="record.payType === 1"
                      src="@/assets/order/zf.png"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <img
                      v-if="record.payType === 2"
                      src="@/assets/order/w.png"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <img
                      v-if="record.payType === 3"
                      src="@/assets/order/j.jpg"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <img
                      v-if="record.payType === 4"
                      src="@/assets/order/p.jpg"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <img
                      v-if="record.payType === 5"
                      src="@/assets/order/zs.jpg"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <span class="card-number">{{ record.setMealName }}</span>
                  </div>
                  <div style="color: #86909c; font-size: 13px">
                    <a-space>
                      <!-- <span v-if="!record.flowVirtual && !record.flowReal"> 无限</span>
                      <span
                        v-else-if="record.flowVirtual || (record.flowReal && record.flowVirtual)"
                        >{{
                          record.flowVirtual >= 1024
                            ? Math.floor((record.flowVirtual / 1024) * 100) / 100 + 'G'
                            : Math.floor(record.flowVirtual * 100) / 100 + 'M'
                        }}</span
                      >
                      <span v-else-if="record.flowReal">{{
                        record.flowReal >= 1024
                          ? Math.floor((record.flowReal / 1024) * 100) / 100 + 'G'
                          : Math.floor(record.flowReal * 100) / 100 + 'M'
                      }}</span> -->
                      <span v-if="record.flowVirtualType == 1">{{
                        record.flowReal >= 1024
                          ? Math.floor((record.flowReal / 1024) * 100) / 100 + 'G'
                          : Math.floor((record.flowReal / 1024) * 100) / 100 >= 0 &&
                            Math.floor((record.flowReal / 1024) * 100) / 100 < 1024
                          ? Math.floor(record.flowReal * 100) / 100 + 'M'
                          : 0 + 'M'
                      }}</span>
                      <span v-else-if="record.flowVirtualType == 0">{{
                        record.flowVirtual >= 1024
                          ? Math.floor((record.flowVirtual / 1024) * 100) / 100 + 'G'
                          : Math.floor((record.flowVirtual / 1024) * 100) / 100 >= 0 &&
                            Math.floor((record.flowVirtual / 1024) * 100) / 100 < 1024
                          ? Math.floor(record.flowVirtual * 100) / 100 + 'M'
                          : 0 + 'M'
                      }}</span>
                      <span v-else>{{
                        record.flowReal >= 1024
                          ? Math.floor((record.flowReal / 1024) * 100) / 100 + 'G'
                          : Math.floor((record.flowReal / 1024) * 100) / 100 >= 0 &&
                            Math.floor((record.flowReal / 1024) * 100) / 100 < 1024
                          ? Math.floor(record.flowReal * 100) / 100 + 'M'
                          : 0 + 'M'
                      }}</span>
                      <span v-if="record.setMealType == 0">无限叠加</span>
                      <span v-else-if="record.setMealType == 1">基础套餐</span>
                      <span v-else-if="record.setMealType == 2">叠加包</span>
                    </a-space>
                  </div>
                </template>

                <template v-if="item.key === 'state'" #cell="{ record }">
                  <a-tag color="red" v-if="record.state == 4">退款</a-tag>
                  <a-tag color="red" v-else-if="record.state == 3">失败</a-tag>
                  <a-tag color="blue" v-else-if="record.state == 2">成功</a-tag>
                  <a-tag color="gold" v-else-if="record.state == 1">进行</a-tag>
                  <a-tag v-else-if="record.state == 0">等待</a-tag>
                  <a-tag color="red" v-else-if="record.state == -1">删除</a-tag></template
                >
                <template v-else-if="item.key === 'remarks'" #cell="{ record }">
                  <span v-if="record.remarks">{{ record.remarks }}</span>
                  <span v-else>--- </span>
                </template>
                <template v-else-if="item.key === 'flow'" #cell="{ record }">
                  <div>
                    <div
                      style="display: flex; justify-content: space-between"
                      v-if="record.flowVirtualType == 1"
                    >
                      <div
                        >已用：{{
                          record.flowUsedVirtual >= 1024
                            ? Math.floor((record.flowUsedVirtual / 1024) * 100) / 100 + 'G'
                            : record.flowUsedVirtual > 0 && record.flowUsedVirtual < 1024
                            ? Math.floor(record.flowUsedVirtual * 100) / 100 + 'M'
                            : 0 + 'M'
                        }}</div
                      >
                      <div
                        >剩余：{{
                          Math.floor((record.flowReal - record.flowUsedVirtual) * 100) / 100 >= 1024
                            ? Math.floor(
                                ((record.flowReal - record.flowUsedVirtual) / 1024) * 100
                              ) /
                                100 +
                              'G'
                            : Math.floor((record.flowVirtual - record.flowUsedVirtual) * 100) /
                                100 >=
                                0 &&
                              Math.floor((record.flowVirtual - record.flowUsedVirtual) * 100) /
                                100 <
                                1024
                            ? Math.floor((record.flowVirtual - record.flowUsedVirtual) * 100) /
                                100 +
                              'M'
                            : 0 + 'M'
                        }}</div
                      >
                    </div>
                    <div
                      style="display: flex; justify-content: space-between"
                      v-else-if="record.flowVirtualType == 0"
                    >
                      <div
                        >已用：{{
                          record.flowUsedVirtual >= 1024
                            ? Math.floor((record.flowUsedVirtual / 1024) * 100) / 100 + 'G'
                            : record.flowUsedVirtual > 0 && record.flowUsedVirtual < 1024
                            ? Math.floor(record.flowUsedVirtual * 100) / 100 + 'M'
                            : 0 + 'M'
                        }}</div
                      >
                      <div
                        >剩余：{{
                          Math.floor((record.flowVirtual - record.flowUsedVirtual) * 100) / 100 >=
                          1024
                            ? Math.floor(
                                ((record.flowVirtual - record.flowUsedVirtual) / 1024) * 100
                              ) /
                                100 +
                              'G'
                            : Math.floor((record.flowVirtual - record.flowUsedVirtual) * 100) /
                                100 >=
                                0 &&
                              Math.floor((record.flowVirtual - record.flowUsedVirtual) * 100) /
                                100 <
                                1024
                            ? Math.floor((record.flowVirtual - record.flowUsedVirtual) * 100) /
                                100 +
                              'M'
                            : 0 + 'M'
                        }}</div
                      >
                    </div>
                    <div style="display: flex; justify-content: space-between" v-else>
                      <div
                        >已用：{{
                          record.flowUsedVirtual >= 1024
                            ? Math.floor((record.flowUsedVirtual / 1024) * 100) / 100 + 'G'
                            : record.flowUsedVirtual > 0 && record.flowUsedVirtual < 1024
                            ? Math.floor(record.flowUsedVirtual * 100) / 100 + 'M'
                            : 0 + 'M'
                        }}</div
                      >
                      <div
                        >剩余：{{
                          Math.floor((record.flowReal - record.flowUsed) * 100) / 100 >= 1024
                            ? Math.floor(((record.flowReal - record.flowUsed) / 1024) * 100) / 100 +
                              'G'
                            : Math.floor((record.flowReal - record.flowUsed) * 100) / 100 >= 0 &&
                              Math.floor((record.flowReal - record.flowUsed) * 100) / 100 < 1024
                            ? Math.floor((record.flowReal - record.flowUsed) * 100) / 100 + 'M'
                            : 0 + 'M'
                        }}</div
                      >
                    </div>

                    <a-progress
                      v-if="record.flowVirtualType == 1"
                      :percent="record.flowUsedVirtual / record.flowReal"
                      :stroke-width="10"
                      :show-text="false"
                      color="#3491fa"
                    />
                    <a-progress
                      v-else-if="record.flowVirtualType == 0"
                      :percent="record.flowUsedVirtual / record.flowVirtual"
                      :stroke-width="10"
                      :show-text="false"
                      color="#3491fa"
                    />
                    <a-progress
                      v-else
                      :percent="record.flowUsedVirtual / record.flowReal"
                      :stroke-width="10"
                      :show-text="false"
                      color="#3491fa"
                    />
                  </div>
                </template>
                <template v-if="item.key === 'createTime'" #cell="{ record }">
                  <span>{{ record.createTime }}</span>
                </template>
                <template v-if="item.key === 'time'" #cell="{ record }">
                  <span v-if="record.validity">
                    <span v-if="record.validityMore == true && record.validityType == 0">
                      <div
                        >总共：{{ Math.floor(30 * record.validity * 100) / 100
                        }}{{ record.validityType == 0 ? '天' : '月' }}</div
                      >
                      <div style="color: #86909c; font-size: 13px"
                        >当前：{{ record.pageNumber }}期/{{ record.validity }}期</div
                      >
                    </span>
                    <span v-else-if="record.validityMore == true && record.validityType == 1">
                      <div
                        >总共： {{ record.validity
                        }}{{ record.validityType == 0 ? '天' : '月' }}</div
                      >
                      <div style="color: #86909c; font-size: 13px"
                        >当前：{{ record.pageNumber }}期/{{ record.validity }}期</div
                      >
                    </span>
                    <span v-else>
                      {{ record.validity }}&nbsp;{{ record.validityType == 0 ? '天' : '月' }}
                    </span>
                  </span>
                  <span v-else>---</span>
                </template>
                <template v-if="item.key === 'effectiveState'" #cell="{ record }">
                  <a-select
                    v-model="record.effectiveState"
                    @change="changeTimeFn(record)"
                    placeholder="请选择订单时间"
                  >
                    <a-option :value="0">立即生效</a-option>
                    <a-option :value="1">本月生效</a-option>
                    <a-option :value="2">次月生效</a-option>
                    <a-option :value="3">月底顺延</a-option>
                    <a-option :value="4">跨月顺延</a-option>
                  </a-select>
                </template>

                <template v-if="item.key === 'effectiveType'" #cell="{ record }">
                  <a-tag color="red" v-if="record.effectiveType == 2">已失效</a-tag>
                  <a-tag v-else-if="record.effectiveType == 0">待生效</a-tag>
                  <a-tag color="blue" v-else-if="record.effectiveType == 1">生效中</a-tag>
                </template>

                <template v-else-if="item.key === 'payType'" #cell="{ record }">
                  <div v-if="record.payType == 0"> 余额</div>
                  <div v-if="record.payType == 1"> 支付宝</div>
                  <div v-if="record.payType == 2"> 微信</div>
                  <div v-if="record.payType == 3"> 接口</div>
                  <div v-if="record.payType == 4"> 批量</div>
                </template>
                <template v-else-if="item.key === 'effectiveTime'" #cell="{ record }">
                  <a-date-picker
                    style="width: 100%"
                    v-model="record.effectiveTime"
                    show-time
                    :allow-clear="false"
                    placeholder="请选择开始时间"
                    :time-picker-props="{ defaultValue: '12:00:00' }"
                    format="YYYY-MM-DD HH:mm:ss"
                  />
                </template>
                <template v-else-if="item.key === 'expirationTime'" #cell="{ record }">
                  <a-date-picker
                    style="width: 100%"
                    v-model="record.expirationTime"
                    show-time
                    :allow-clear="false"
                    @ok="changeTimeFns(record)"
                    @select-shortcut="changeTimeFn(record)"
                    placeholder="请选择结束时间"
                    :time-picker-props="{ defaultValue: '12:00:00' }"
                    format="YYYY-MM-DD HH:mm:ss"
                    :shortcuts="[
                      {
                        label: '本月时间',
                        value: () => (
                          (record.effectiveTime = $dayjs(record.createTime).format(
                            'YYYY-MM-DD HH:mm:ss'
                          )),
                          (record.expirationTime = $dayjs(record.createTime)
                            .endOf('month')
                            .format('YYYY-MM-DD HH:mm:ss'))
                        ),
                      },
                      {
                        label: '次月时间',
                        value: () => (
                          (record.effectiveTime = $dayjs(record.createTime)
                            .add(1, 'month')
                            .startOf('month')
                            .format('YYYY-MM-DD HH:mm:ss')),
                          (record.expirationTime = $dayjs(record.createTime)
                            .add(1, 'month')
                            .endOf('month')
                            .format('YYYY-MM-DD HH:mm:ss'))
                        ),
                      },
                    ]"
                  />
                </template>

                <template v-else-if="item.key === 'actions'" #cell="{ record }">
                  <div style="width: 168px; display: flex; flex-wrap: wrap">
                    <a-button
                      @click="detailFn(record)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      >详情</a-button
                    >
                    <a-button
                      @click="detailOrderFn(record)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      >编辑</a-button
                    >

                    <a-button
                      @click="detailFns(record)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      >退款</a-button
                    >
                    <a-button
                      @click="delOrder(record)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      >删除</a-button
                    >
                    <a-button
                      @click="massFn(record.id)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      >报文</a-button
                    >
                    <a-button
                      @click="success(record.id)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      >成功</a-button
                    >
                    <a-button
                      @click="fail(record.id)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      >失败</a-button
                    >
                  </div>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <a-table
            v-if="orderType == '1'"
            :loading="tables.tableLoading"
            :bordered="{ wrapper: true, cell: tables.bordered }"
            :stripe="(tables.striped as boolean)"
            :data="balanceOrderList"
            :pagination="false"
            :row-key="rowKey"
            :scroll="{ x: 1500 }"
            :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          >
            <template #columns>
              <a-table-column
                v-for="item of tableColumns1.list"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
                :fixed="item.fixed"
                :ellipsis="true"
                :tooltip="true"
              >
                <template v-if="item.key === 'stateName'" #cell="{ record }">
                  <a-tag color="blue" v-if="record.number == 1">首充{{ record.number }}</a-tag>
                  <a-tag color="red" v-else>续充{{ record.number }}</a-tag>
                </template>
                <template v-if="item.key === 'payAmount'" #cell="{ record }">
                  <div class="ba">
                    <img
                      v-if="record.type === 0"
                      src="@/assets/order/zf.png"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <img
                      v-if="record.type === 1"
                      src="@/assets/order/w.png"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    {{ Math.floor((record.receivedAmount - record.giveAmount) * 100) / 100 }}
                  </div>
                </template>
                <template v-if="item.key === 'state'" #cell="{ record }">
                  <a-tag color="red" v-if="record.refundType == 0 || record.refundType == 1"
                    >退款</a-tag
                  >
                  <a-tag color="blue" v-else>成功</a-tag>
                </template>
                <template v-else-if="item.key === 'type'" #cell="{ record }">
                  <div v-if="record.type == 0"> 支付宝</div>
                  <div v-if="record.type == 1"> 微信</div>
                </template>
                <template v-else-if="item.key === 'userName'" #cell="{ record }">
                  <span v-if="record.user">{{ record.user.userName }}</span>
                  <span v-else>管理员 </span>
                </template>
                <template v-else-if="item.key === 'refundRemarks'" #cell="{ record }">
                  <span v-if="record.refundRemarks">{{ record.refundRemarks }}</span>
                  <span v-else>- - -</span>
                </template>

                <template v-else-if="item.key === 'actions'" #cell="{ record }">
                  <a-space :size="2">
                    <a-button
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      @click="detailBalanceFn(record)"
                      >详情</a-button
                    >
                    <a-button
                      @click="detailBalanceFns(record)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      status="warning"
                      >退款</a-button
                    >
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <TableFooter
            style="
              background-color: var(--color-bg-2);
              padding: 5px 0;
              margin-top: 0;
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            "
            v-if="orderType == '1'"
            :pagination="paginationBalance"
          />
          <a-table
            v-if="orderType == '2'"
            :loading="tables.tableLoading"
            :bordered="{ wrapper: true, cell: tables.bordered }"
            :stripe="(tables.striped as boolean)"
            :data="orderRealList"
            :pagination="false"
            :row-key="rowKey"
            :scroll="{ x: 1500 }"
            :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          >
            <template #columns>
              <a-table-column
                v-for="item of tableColumns2.list"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
                :fixed="item.fixed"
                :ellipsis="true"
                :tooltip="true"
              >
                <template v-if="item.key === 'stateName'" #cell="{ record }">
                  <a-tag color="blue" v-if="record.number == 1">首充{{ record.number }}</a-tag>
                  <a-tag color="red" v-else>续充{{ record.number }}</a-tag>
                </template>
                <template v-if="item.key === 'refundTime'" #cell="{ record }">
                  <a-tag color="red" v-if="record.refundTime">已退款</a-tag>
                  <a-tag color="blue" v-else>成功</a-tag>
                </template>
                <template v-else-if="item.key === 'card'" #cell="{ record }">
                  <span>{{ record.card.card }}</span>
                </template>
                <template v-else-if="item.key === 'refundRemarks'" #cell="{ record }">
                  <span v-if="record.refundRemarks">{{ record.refundRemarks }}</span>
                  <span v-else>- - -</span>
                </template>
                <template v-else-if="item.key === 'paymentAmount'" #cell="{ record }">
                  <div class="ba">
                    <img
                      v-if="record.type === 0"
                      src="@/assets/order/zf.png"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <img
                      v-if="record.type === 1"
                      src="@/assets/order/w.png"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <span style="cursor: pointer" @click="detailRealFn(record)">{{
                      record.paymentAmount
                    }}</span>
                  </div>
                </template>

                <template v-else-if="item.key === 'actions'" #cell="{ record }">
                  <a-space :size="2">
                    <a-button
                      @click="detailRealRefundFn(record)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      status="warning"
                      >退款</a-button
                    >
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <TableFooter
            v-if="orderType == '2'"
            style="
              background-color: var(--color-bg-2);
              padding: 5px 0;
              margin-top: 0;
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            "
            :pagination="paginationReal"
          />
          <a-table
            v-if="orderType == '3'"
            :loading="tables.tableLoading"
            :bordered="{ wrapper: true, cell: tables.bordered }"
            :stripe="(tables.striped as boolean)"
            :data="orderChangeList"
            :pagination="false"
            :row-key="rowKey"
            :scroll="{ x: 1500 }"
            :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          >
            <template #columns>
              <a-table-column
                v-for="item of tableColumns3.list"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
                :fixed="item.fixed"
                :ellipsis="true"
                :tooltip="true"
              >
                <template v-if="item.key === 'newCard'" #cell="{ record }">
                  <div class="ba" v-if="record.newCard">
                    <span>{{ record.newCard.card }}</span>
                  </div>
                </template>

                <template v-if="item.key === 'applyTime'" #cell="{ record }">
                  <div class="ba" v-if="record.newCard">
                    <img
                      v-if="record.type === 0"
                      src="@/assets/order/zf.png"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <img
                      v-if="record.type === 1"
                      src="@/assets/order/w.png"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <span v-if="record.applyTime">{{ record.applyTime }}</span>
                    <span v-else>- - -</span>
                  </div>
                </template>
                <template v-if="item.key === 'cardSpecies'" #cell="{ record }">
                  <span v-if="record.cardSpecies">{{ record.cardSpecies }}</span>
                  <span v-else>- - -</span>
                </template>
                <template v-if="item.key === 'handlerTime'" #cell="{ record }">
                  <span v-if="record.handlerTime">{{ record.handlerTime }}</span>
                  <span v-else>- - -</span>
                </template>
                <template v-if="item.key === 'remarks'" #cell="{ record }">
                  <span v-if="record.remarks">{{ record.remarks }}</span>
                  <span v-else>- - -</span>
                </template>
                <template v-if="item.key === 'handlerRemarks'" #cell="{ record }">
                  <span v-if="record.refundRemarks">{{ record.refundRemarks }}</span>
                  <span v-else>- - -</span>
                </template>
                <template v-if="item.key === 'refundRemarks'" #cell="{ record }">
                  <span v-if="record.refundRemarks">{{ record.refundRemarks }}</span>
                  <span v-else>- - -</span>
                </template>
                <template v-if="item.key === 'payAmount'" #cell="{ record }">
                  {{ Math.floor((record.receivedAmount - record.giveAmount) * 100) / 100 }}
                </template>
                <template v-if="item.key === 'state'" #cell="{ record }">
                  <a-tag color="blue" v-if="record.state == 0">等待审核</a-tag>
                  <a-tag color="blue" v-if="record.state == 1">正在审核</a-tag>
                  <a-tag color="blue" v-if="record.state == 2">审核成功</a-tag>
                  <a-tag color="red" v-if="record.state == 3">审核驳回</a-tag>
                  <a-tag color="red" v-if="record.state == 4">退款</a-tag>
                </template>
                <template v-else-if="item.key === 'actions'" #cell="{ record }">
                  <a-space :size="2">
                    <a-button
                      v-permission="handlerChangeOrder"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      @click="openState(record)"
                      >处理</a-button
                    >
                    <a-button
                      v-permission="deleteChangeOrder"
                      @click="deleteFn(record)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      status="warning"
                      >移除</a-button
                    >
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <TableFooter
            v-if="orderType == '3'"
            style="
              background-color: var(--color-bg-2);
              padding: 5px 0;
              margin-top: 0;
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            "
            :pagination="paginationChange"
          />
          <a-table
            v-if="orderType == '4'"
            :loading="tables.tableLoading"
            :bordered="{ wrapper: true, cell: tables.bordered }"
            :stripe="(tables.striped as boolean)"
            :data="couponOrderList"
            :pagination="false"
            :row-key="rowKey"
            :scroll="{ x: 1500 }"
            :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          >
            <template #columns>
              <a-table-column
                v-for="item of tableColumns4.list"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
                :fixed="item.fixed"
                :ellipsis="true"
                :tooltip="true"
              >
                <template v-if="item.key === 'couponName'" #cell="{ record }">
                  <div class="ba">
                    <img
                      v-if="record.type === 0"
                      src="@/assets/order/zf.png"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <img
                      v-if="record.type === 1"
                      src="@/assets/order/w.png"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <img
                      v-if="record.type === 2"
                      src="@/assets/order/p.jpg"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <img
                      v-if="record.type === 3"
                      src="@/assets/order/zs.jpg"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <span>{{ record.couponName }}</span>
                  </div>
                </template>
                <template v-if="item.key === 'state'" #cell="{ record }">
                  <a-tag color="blue" v-if="record.state == 0">正常</a-tag>
                  <a-tag color="red" v-if="record.state == 1">退款</a-tag>
                </template>

                <template v-else-if="item.key === 'couponCount'" #cell="{ record }">
                  <span>{{ record.num }}/{{ record.couponCount }}</span>
                </template>
                <template v-else-if="item.key === 'couponAmount'" #cell="{ record }">
                  <span>{{ record.couponAllAmount }}</span>
                </template>
                <template v-else-if="item.key === 'paymentAmount'" #cell="{ record }">
                  <span>{{ Math.floor(record.paymentAmount * 100) / 100 }}</span>
                </template>
                <template v-else-if="item.key === 'userName'" #cell="{ record }">
                  <span v-if="record.user">{{ record.user.userName }}</span>
                  <span v-else>管理员 </span>
                </template>
                <template v-else-if="item.key === 'endUseTime'" #cell="{ record }">
                  <span v-if="record.endUseTime">{{ record.endUseTime }}</span>
                  <span v-else>---</span>
                </template>
                <template v-else-if="item.key === 'addUseTime'" #cell="{ record }">
                  <span v-if="record.addUseTime">{{ record.addUseTime }}</span>
                  <span v-else>---</span>
                </template>
                <template v-else-if="item.key === 'refundTime'" #cell="{ record }">
                  <span v-if="record.refundTime">{{ record.refundTime }}</span>
                  <span v-else>---</span>
                </template>
                <template v-else-if="item.key === 'refundRemarks'" #cell="{ record }">
                  <span v-if="record.refundRemarks">{{ record.refundRemarks }}</span>
                  <span v-else>---</span>
                </template>
                <template v-else-if="item.key === 'actions'" #cell="{ record }">
                  <a-space :size="2">
                    <a-button
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      @click="details1(record)"
                      >查看</a-button
                    >
                    <a-button
                      v-permission="ordercouponrefund"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      @click="detailCouponFn(record)"
                      >详情</a-button
                    >
                    <a-button
                      v-permission="ordercouponrefund"
                      @click="openCouponState(record)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      status="warning"
                      >退款</a-button
                    >
                    <a-button
                      v-permission="couponDelete"
                      @click="onDeleteItem(record)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      status="danger"
                      >删除</a-button
                    >
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <TableFooter
            v-if="orderType == '4'"
            style="
              background-color: var(--color-bg-2);
              padding: 5px 0;
              margin-top: 0;
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            "
            :pagination="paginationCoupon"
          />
          <a-table
            v-if="orderType == '5'"
            :loading="tables.tableLoading"
            :bordered="{ wrapper: true, cell: tables.bordered }"
            :stripe="(tables.striped as boolean)"
            :data="vipOrderList"
            :pagination="false"
            :row-key="rowKey"
            :scroll="{ x: 1500 }"
            :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          >
            <template #columns>
              <a-table-column
                v-for="item of tableColumns5.list"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
                :fixed="item.fixed"
                :ellipsis="true"
                :tooltip="true"
              >
                <template v-if="item.key === 'vipName'" #cell="{ record }">
                  <div class="ba">
                    <img
                      v-if="record.type === 0"
                      src="@/assets/order/y.jpg"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <img
                      v-if="record.type === 1"
                      src="@/assets/order/zf.png"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <img
                      v-if="record.type === 2"
                      src="@/assets/order/w.png"
                      style="width: 16px; height: 16px; margin-right: 5px"
                      mode=""
                    />
                    <span>{{ record.vipName }}</span>
                  </div>
                </template>
                <template v-if="item.key === 'state'" #cell="{ record }">
                  <a-tag color="blue" v-if="record.state == 0">正常</a-tag>
                  <a-tag color="red" v-if="record.state == 1">退款</a-tag>
                </template>
                <template v-else-if="item.key === 'couponCount'" #cell="{ record }">
                  <span>{{ record.vipTime }}{{ record.vipTimeType == 0 ? '天' : '月' }}</span>
                </template>
                <template v-else-if="item.key === 'couponAmount'" #cell="{ record }">
                  <span>{{ record.couponAmount }}/{{ record.couponAllAmount }}</span>
                </template>
                <template v-else-if="item.key === 'userName'" #cell="{ record }">
                  <span v-if="record.user">{{ record.user.userName }}</span>
                  <span v-else>管理员 </span>
                </template>
                <template v-else-if="item.key === 'endUseTime'" #cell="{ record }">
                  <span v-if="record.endUseTime">{{ record.endUseTime }}</span>
                  <span v-else>---</span>
                </template>
                <template v-else-if="item.key === 'addUseTime'" #cell="{ record }">
                  <span v-if="record.addUseTime">{{ record.addUseTime }}</span>
                  <span v-else>---</span>
                </template>
                <template v-else-if="item.key === 'refundTime'" #cell="{ record }">
                  <span v-if="record.refundTime">{{ record.refundTime }}</span>
                  <span v-else>---</span>
                </template>
                <template v-else-if="item.key === 'refundRemarks'" #cell="{ record }">
                  <span v-if="record.refundRemarks">{{ record.refundRemarks }}</span>
                  <span v-else>---</span>
                </template>
                <template v-else-if="item.key === 'actions'" #cell="{ record }">
                  <a-space :size="2">
                    <a-button
                      v-permission="speedTui"
                      @click="openVipState(record)"
                      style="padding: 0px 4px"
                      type="text"
                      size="small"
                      status="warning"
                      >退款</a-button
                    >
                  </a-space>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <TableFooter
            v-if="orderType == '5'"
            style="
              background-color: var(--color-bg-2);
              padding: 5px 0;
              margin-top: 0;
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            "
            :pagination="paginationVip"
          />
          <a-table
            v-if="orderType == '6'"
            :loading="tables.tableLoading"
            :bordered="{ wrapper: true, cell: tables.bordered }"
            :stripe="(tables.striped as boolean)"
            :data="rebateOrderList"
            :pagination="false"
            :row-key="rowKey"
            :scroll="{ x: 1500 }"
            :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          >
            <template #columns>
              <a-table-column
                v-for="item of tableColumns6.list"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
                :fixed="item.fixed"
                :ellipsis="true"
                :tooltip="true"
              >
                <template v-if="item.key === 'userName'" #cell="{ record }">
                  {{ record.user.userName }}
                </template>
                <template v-if="item.key === 'card'" #cell="{ record }">
                  {{ record.card.card }}
                </template>
                <template v-if="item.key === 'setMealName'" #cell="{ record }">
                  {{ record.order.setMealName }}
                </template>
                <template v-if="item.key === 'addTime'" #cell="{ record }">
                  {{ record.order.createTime }}
                </template>
                <template v-else-if="item.key === 'state'" #cell="{ record }">
                  <a-tag v-if="record.state === 0">等待返佣</a-tag>
                  <a-tag color="blue" v-else-if="record.state === 1">返佣成功</a-tag>
                  <a-tag color="red" v-else-if="record.state === 2">返佣收回</a-tag>
                  <a-tag color="red" v-else-if="record.state === 3">回收失败</a-tag>
                  <a-tag color="red" v-else-if="record.state === 4">返佣失败</a-tag>
                </template>
                <template v-else-if="item.key === 'action'" #cell="{ record }">
                  <a-button v-permission="rebaterecovery" type="text" @click="rebateDel(record)"
                    >收回</a-button
                  >
                </template>
              </a-table-column>
            </template>
          </a-table>
          <TableFooter
            v-if="orderType == '6'"
            style="
              background-color: var(--color-bg-2);
              padding: 5px 0;
              margin-top: 0;
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            "
            :pagination="paginationRebate"
          />
          <a-table
            v-if="orderType == '7'"
            :loading="tables.tableLoading"
            :bordered="{ wrapper: true, cell: tables.bordered }"
            :stripe="(tables.striped as boolean)"
            :data="balanceOrderLists"
            :pagination="false"
            :row-key="rowKey"
            :scroll="{ x: 1500 }"
            :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          >
            <template #columns>
              <a-table-column
                v-for="item of tableColumns7.list"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
                :fixed="item.fixed"
                :ellipsis="true"
                :tooltip="true"
              >
                <template v-if="item.key === 'remarks'" #cell="{ record }">
                  <span v-if="record.remarks">{{ record.remarks }}</span>
                  <span v-else>---</span>
                </template>
                <template v-else-if="item.key === 'add'" #cell="{ record }">
                  <a-tag color="blue" v-if="record.add === true">增加</a-tag>
                  <a-tag color="red" v-else-if="record.add === false">减少</a-tag>
                </template>
                <template v-else-if="item.key === 'type'" #cell="{ record }">
                  <span
                    v-for="(items, index) in typeLists"
                    :key="index"
                    v-show="items.type == record.type"
                    >{{ items.message }}</span
                  >
                </template>
              </a-table-column>
            </template>
          </a-table>
          <TableFooter
            v-if="orderType == '7'"
            style="
              background-color: var(--color-bg-2);
              padding: 5px 0;
              margin-top: 0;
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
            "
            :pagination="paginationBalances"
          />
        </div>
      </div>
      <div class="details">
        <div style="display: flex; flex-wrap: wrap">
          <a-spin :loading="refLoad">
            <div class="sq" @click="RefreshFn('')">
              <img alt="" src="@/assets/onecard/sx.png" class="img" />
              <div>设备刷新</div>
            </div>
          </a-spin>
          <a-spin :loading="stopLoad">
            <div class="sq" @click="stopFn">
              <img alt="" src="@/assets/onecard/tj.png" class="img" />
              <div>设备停机</div>
            </div>
          </a-spin>
          <a-spin :loading="startLoad">
            <div class="sq" @click="startFn">
              <img alt="" src="@/assets/onecard/fj.png" class="img" />
              <div>设备复机</div>
            </div>
          </a-spin>
          <!-- <div class="sq" @click="openDetection">
            <img alt="" src="@/assets/onecard/znjc.png" class="img" />
            <div>智能检测</div>
          </div> -->
          <div class="sq" @click="mealFn">
            <img alt="" src="@/assets/onecard/tccz.png" class="img" />
            <div>套餐充值</div>
          </div>
          <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/bgsj.png" class="img" />
            <div>变更时间</div>
          </div> -->
          <div class="sq" @click="openTransfer">
            <img alt="" src="@/assets/onecard/zykb.png" class="img" />
            <div>转移卡板</div>
          </div>
          <!-- <div class="sq" @click="doRefreshOrder">
            <img alt="" src="@/assets/onecard/czjl.png" class="img" />
            <div>充值记录</div>
          </div> -->
          <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/szxs.png" class="img" />
            <div>设置限速</div>
          </div> -->
          <div class="sq" @click="balanceFn">
            <img alt="" src="@/assets/onecard/czye.png" class="img" />
            <div>充值余额</div>
          </div>
          <div class="sq" @click="passWordFn">
            <img alt="" src="@/assets/onecard/mm.png" class="img" />
            <div>修改密码</div>
          </div>
          <div class="sq" @click="openVip">
            <img alt="" src="@/assets/vipB.png" class="img" />
            <div>极速会员</div>
          </div>
          <!-- <div class="sq" @click="openClearRealName">
            <img alt="" src="@/assets/onecard/smsc.png" class="img" />
            <div>清除实名</div>
          </div> -->
          <!-- <div class="sq" @click="realNameFno">
            <img alt="" src="@/assets/onecard/smsc.png" class="img" />
            <div>清除官方</div>
          </div>
          <div class="sq" @click="realNameFns">
            <img alt="" src="@/assets/onecard/smsc.png" class="img" />
            <div>清除系统</div>
          </div> -->
          <!-- <div class="sq" @click="cancelCFns">
            <img alt="" src="@/assets/onecard/zx.png" class="img" />
            <div>卡板注销</div>
          </div> -->
          <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/qkll.png" class="img" />
            <div>清空流量</div>
          </div> -->
          <div class="sq" @click="deleteBindingFn">
            <img alt="" src="@/assets/onecard/jk2.png" class="img" />
            <div>机卡绑定</div>
          </div>
          <div class="sq" @click="openRemark">
            <img alt="" src="@/assets/onecard/yhq.png" class="img" />
            <div>充值券包</div>
          </div>
          <div class="sq" @click="caozuoFn">
            <img alt="" src="@/assets/log123.png" class="img" />
            <div>卡板日志</div>
          </div>
          <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/dl.png" class="img" />
            <div>达量断网</div>
          </div> -->
          <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/ddw.png" class="img" />
            <div>单独断网</div>
          </div> -->
          <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/ykym.png" class="img" />
            <div>一卡一码</div>
          </div> -->
          <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/szwifi.png" class="img" />
            <div>设置wifi</div>
          </div> -->
          <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/cqsb.png" class="img" />
            <div>重启设备</div>
          </div> -->
          <!-- <div class="sq">
            <img alt="" src="@/assets/onecard/hfcc.png" class="img" />
            <div>恢复出厂</div>
          </div> -->

          <div class="sq" @click="openTime">
            <img alt="" src="@/assets/clear123.png" class="img" />
            <div>清除数据</div>
          </div>
          <!-- <div class="sq" @click="delimitation">
            <img alt="" src="@/assets/onecard/hk.png" class="img" />
            <div>卡板划卡</div>
          </div> -->
          <!-- <div class="sq" @click="openRetrieve">
            <img alt="" src="@/assets/onecard/hs.png" class="img" />
            <div>卡板回收</div>
          </div> -->
          <!-- <div class="sq" @click="openParameter">
            <img alt="" src="@/assets/onecard/xgxl.png" class="img" />
            <div>修改系列</div>
          </div> -->
        </div>
      </div>
    </div>
    <div v-if="type != '0'" style="margin-top: 20px">
      <div class="top">
        <div class="tops"> 使用流量统计</div>

        <div style="width: 100%; display: flex; justify-content: space-between">
          <div id="opnhggggggggggg" style="width: 100%; height: 500px"></div>
        </div>
      </div>
      <div class="bottomTable" :style="{ width: '100%' }">
        <div class="contentBg box_3" style="width: 34%; min-height: 662px">
          <div class="tops">
            <span style="font-size: 16px"> 卡板分销日志</span>
          </div>

          <a-table
            style="margin-top: 20px"
            :loading="tableLoading"
            :data="cardList"
            :pagination="false"
          >
            <template #columns>
              <a-table-column
                v-for="item of columns_userRecharge"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
                :ellipsis="true"
                :tooltip="true"
              />
            </template>
          </a-table>

          <TableFooter :pagination="pagination" />
        </div>
        <div class="contentBg box_3" style="width: 29%; min-height: 662px">
          <div class="tops">
            <span style="font-size: 16px"> 卡板回收日志</span>
          </div>

          <a-table
            style="margin-top: 20px"
            :loading="tableLoading1"
            :data="cardList1"
            :pagination="false"
          >
            <template #columns>
              <a-table-column
                v-for="item of columns_usermeal"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
                :ellipsis="true"
                :tooltip="true"
              />
            </template>
          </a-table>
          <TableFooter :pagination="pagination1" />
        </div>
        <div class="contentBg box_3" style="width: 33%; min-height: 662px">
          <div class="tops">
            <span style="font-size: 16px"> 系列变更日志</span>
          </div>

          <a-table
            style="margin-top: 20px"
            :loading="tableLoading2"
            :data="cardList2"
            :pagination="false"
          >
            <template #columns>
              <a-table-column
                v-for="item of columns_userfy"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :width="item.width"
                :data-index="(item.key as string)"
              >
                <template v-if="item.key === 'startTime'" #cell="{ record }">
                  <span>
                    {{ record.startTime + '-' + record.endTime }}
                  </span>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <TableFooter :pagination="pagination2" />
        </div>
      </div>
    </div>
    <!-- 充值套餐 -->
    <a-modal
      v-model:visible="mealVisible"
      @before-close="mealCFn"
      title="充值套餐"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="mealRef" :auto-label-width="true" :model="mealForm">
        <a-form-item label="充值套餐" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item
                hide-asterisk
                field="setMealId"
                validate-trigger="input"
                :rules="[{ required: true, message: '请选择充值套餐' }]"
                asterisk-position="end"
                no-style
              >
                <a-select v-model="mealForm.setMealId" placeholder="请选择充值套餐" allow-clear>
                  <a-option v-for="item in mealList" :key="item.id" :value="item.id">{{
                    item.name
                  }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="订单时间" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item
                field="next"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  {
                    required: true,
                    message: '请选择充值类型',
                  },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-radio-group class="radio-bcg" v-model="mealForm.next">
                  <a-radio :value="0">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div> </div
                        ><div className="custom-radio-card-title">本月</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="1">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div> </div
                        ><div className="custom-radio-card-title">次月</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          v-if="cardDetail.series.channel.api == true"
          field="upstream"
          label="提交上游"
          :rules="[{ required: true, message: '提交上游不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-radio-group class="radio-bcg" v-model="mealForm.upstream">
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">提交</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">不提交</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="remarks" label="充值备注" asterisk-position="end">
          <a-input v-model="mealForm.remarks" placeholder="请输入充值备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="mealCFn">取消</a-button>
          <a-button type="primary" :loading="mealLoad" @click="mealSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 充值套餐记录 -->
    <a-modal
      v-model:visible="orderVisible"
      @before-close="orderCFn"
      title="充值记录"
      width="50%"
      :mask-closable="false"
      title-align="start"
    >
      <a-table
        :columns="columns1"
        :loading="load1"
        :pagination="false"
        :data="rebateList"
        :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
      >
        <template #columns>
          <a-table-column
            v-for="item of columns1"
            :key="item.key"
            align="left"
            :width="item.width"
            :title="(item.title as string)"
            :ellipsis="true"
            :tooltip="true"
          >
            <template v-if="item.key === 'setMealName'" #cell="{ record }">
              <span>{{ record.setMealName }}</span>
            </template>
            <template v-if="item.key === 'createTime'" #cell="{ record }">
              <span>{{ record.createTime }}</span>
            </template>
            <template v-if="item.key === 'paymentAmount'" #cell="{ record }">
              <span>{{ record.paymentAmount }}</span>
            </template>
            <template v-if="item.key === 'effectiveState'" #cell="{ record }">
              <a-tag color="blue" v-if="record.effectiveState == 0">立即生效</a-tag>
              <a-tag color="blue" v-else-if="record.effectiveState == 1">本月生效</a-tag>
              <a-tag color="blue" v-if="record.effectiveState == 2">次月生效</a-tag>
              <a-tag color="blue" v-else-if="record.effectiveState == 3">月底顺延</a-tag>
              <a-tag color="blue" v-if="record.effectiveState == 4">跨月顺延</a-tag>
            </template>
            <template v-if="item.key === 'state'" #cell="{ record }">
              <a-tag color="red" v-if="record.state == 4">退款</a-tag>
              <a-tag color="blue" v-else-if="record.state == 3">失败</a-tag>
              <a-tag color="blue" v-else-if="record.state == 2">成功</a-tag>
              <a-tag color="blue" v-else-if="record.state == 1">进行</a-tag>
              <a-tag color="blue" v-else-if="record.state == 0">等待</a-tag>
              <a-tag color="blue" v-else-if="record.state == -1">删除</a-tag></template
            >
            <template v-if="item.key === 'effectiveType'" #cell="{ record }">
              <a-tag color="red" v-if="record.effectiveType == 2">已失效</a-tag>
              <a-tag v-else-if="record.effectiveType == 0">待生效</a-tag>
              <a-tag color="blue" v-else-if="record.effectiveType == 1">已生效</a-tag>
            </template>
            <template v-else-if="item.key === 'payType'" #cell="{ record }">
              <div v-if="record.payType == 0"> 余额</div>
              <div v-if="record.payType == 1"> 支付宝</div>
              <div v-if="record.payType == 2"> 微信</div>
              <div v-if="record.payType == 3"> 接口</div>
              <div v-if="record.payType == 4"> 批量</div>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 充值余额 -->
    <a-modal
      v-model:visible="balanceVisible"
      @before-close="balanceCFn"
      title="充值余额"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="balanceRef" :auto-label-width="true" :model="balanceForm">
        <a-form-item field="balance" label="卡板余额">
          <span style="color: #3491fa">{{ balanceForm.balance1 }} 元</span>
        </a-form-item>
        <a-form-item field="type" label="充值类型">
          <a-radio-group v-model="balanceForm.type" class="radio-bcg">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">加款</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">扣款</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="2">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">最终金额</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          field="balance"
          label="充值金额"
          :rules="[{ required: true, message: '充值金额不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input-number v-model="balanceForm.balance" placeholder="请输入充值金额" allow-clear />
        </a-form-item>
        <a-form-item
          field="remark"
          label="充值备注"
          :rules="[{ required: true, message: '充值备注不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input v-model="balanceForm.remark" placeholder="请输入充值备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="balanceCFn">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="balanceSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 修改密码 -->
    <a-modal
      v-model:visible="passWordVisible"
      @before-close="passWordCFn"
      title="修改密码"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="passWordRef" :auto-label-width="true" :model="passWordForm">
        <a-form-item
          field="passWord"
          label="新密码"
          :rules="[{ required: true, message: '新密码不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input v-model="passWordForm.passWord" placeholder="请输入新密码" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="passWordCFn">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="passWordSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 卡板注销 -->
    <a-modal
      v-model:visible="cancelVisible"
      @before-close="cancelCFn"
      title="卡板注销"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="cancelRef" :auto-label-width="true" :model="cancelForm">
        <a-form-item
          field="cancellationGroupId"
          label="注销分类"
          :rules="[{ required: true, message: '注销分类不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-select
            v-model="cancelForm.cancellationGroupId"
            placeholder="请选择注销分类"
            allow-clear
          >
            <a-option v-for="item in cancelMold" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="cancelCFn">取消</a-button>
          <a-button type="primary" :loading="cancelloading" @click="cancelSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 修改系列 -->
    <a-modal
      v-model:visible="parameterVisible"
      @before-close="handleCancelParameter"
      title="修改系列"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form
        class="huakaClass"
        ref="parameterForms"
        :model="parameterForm"
        :auto-label-width="true"
      >
        <a-form-item
          field="remarks"
          label="系列名称"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <div
            style="
              width: 100%;
              background-color: #f2f3f5;
              padding: 5px 10px;
              border-radius: 5px;
              color: #3491fa;
            "
            >{{ cardDetail.series.name }}</div
          >
        </a-form-item>
        <a-form-item
          field="seriesId"
          label="修改系列"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          :rules="[{ required: true, message: '请选择系列' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-select
            v-model="parameterForm.seriesId"
            placeholder="请选择系列"
            allow-search
            allow-clear
          >
            <a-option v-for="item in series" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          field="remarks"
          label="修改备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-input v-model="parameterForm.remarks" placeholder="请输入修改系列备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="parameterVisible = false">取消</a-button>
          <a-button type="primary" :loading="loadingsa" @click="handleBeforeOkParameters"
            >确定</a-button
          >
        </a-space>
      </template>
    </a-modal>
    <!-- 分销操作 -->
    <a-modal
      v-model:visible="huakavisible"
      @before-close="handleCancelhuaka"
      title="分销操作"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form class="huakaClass" ref="huakaForms" :model="huakaForm" :auto-label-width="true">
        <a-form-item
          field="userId"
          label="分销客户"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          :rules="[{ required: true, message: '客户不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-select
            v-model="huakaForm.userId"
            placeholder="请选择客户"
            allow-search
            allow-clear
            :options="userList"
            :virtual-list-props="{ height: 200 }"
        /></a-form-item>

        <a-form-item
          field="remarks"
          label="分销备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-input v-model="huakaForm.remarks" placeholder="请输入划卡备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="huakavisible = false">取消</a-button>
          <a-button type="primary" :loading="huankaLoad" @click="handleBeforeOkhuakas"
            >确定</a-button
          >
        </a-space>
      </template>
    </a-modal>
    <!-- 回收操作 -->
    <a-modal
      v-model:visible="retrieveVisible"
      @before-close="handleCancelRetrieve"
      title="回收操作"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form class="huakaClass" ref="retrieveForms" :model="retrieveForm" :auto-label-width="true">
        <a-form-item
          field="remarks"
          label="回收备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-input v-model="retrieveForm.remarks" placeholder="请输入回收备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="retrieveVisible = false">取消</a-button>
          <a-button type="primary" :loading="retrieveLoad" @click="handleBeforeOkRetrieves"
            >确定</a-button
          >
        </a-space>
      </template>
    </a-modal>
    <!-- 卡板日志 -->
    <a-modal
      v-model:visible="caozuo"
      title="卡板日志"
      width="840px"
      :mask-closable="false"
      title-align="start"
    >
      <div class="right-line">
        <a-radio-group v-model="logType" type="button" style="height: 32px">
          <a-radio :value="1">操作日志</a-radio>
          <a-radio :value="2" @click="retailRefresh(1)">分销日志</a-radio>
          <a-radio :value="3" @click="recycleRefresh(1)">回收日志</a-radio>
          <a-radio :value="4" @click="modifyRefresh(1)">修改系列</a-radio>
        </a-radio-group>
      </div>
      <div v-if="logType == 1">
        <a-table
          :columns="columns3"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          :pagination="false"
          :loading="load3"
          :scroll="{ x: 1200 }"
          :data="rebateListse"
        >
          <template #columns>
            <a-table-column
              v-for="item of columns3"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'time'" #cell="{ record }">
                <span>{{ record.time }}</span>
              </template>
              <template v-if="item.key === 'source'" #cell="{ record }">
                <a-space>
                  <a-tag v-if="record.source == 0">系统内部</a-tag>
                  <a-tag v-else-if="record.source == 1">管理员后台</a-tag>
                  <a-tag v-else-if="record.source == 2">代理后台</a-tag>
                  <a-tag v-else-if="record.source == 3">充值前端</a-tag>
                  <a-tag v-else-if="record.source == 4">API</a-tag>
                  <a-tag v-else-if="record.source == 5">系统轮询</a-tag>
                </a-space>
              </template>
              <template v-if="item.key === 'type'" #cell="{ record }">
                <a-space>
                  <a-tag v-if="record.type == 0">复机</a-tag>
                  <a-tag v-else-if="record.type == 1">停机</a-tag>
                  <a-tag v-else-if="record.type == 2">机卡绑定</a-tag>
                  <a-tag v-else-if="record.type == 3">删除官方实名</a-tag>
                  <a-tag v-else-if="record.type == 4">卡板限速</a-tag>
                  <a-tag v-else-if="record.type == 5">解除限速</a-tag>
                  <a-tag v-else-if="record.type == 6">实名变更</a-tag>
                </a-space>
              </template>
              <template v-if="item.key === 'success'" #cell="{ record }">
                <a-space>
                  <a-tag v-if="record.error" color="red">失败</a-tag>
                  <a-tag v-else color="arcoblue">成功</a-tag>
                </a-space>
              </template>
              <template v-if="item.key === 'error'" #cell="{ record }">
                <a-space>
                  <div v-if="!record.error">- - -</div>
                  <div v-else-if="record.error">{{ record.error }}</div>
                  <a-tooltip v-else-if="record.error.length > 19" :content="record.error">
                    <div
                      style="
                        width: 200px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                      >{{ record.error }}</div
                    >
                  </a-tooltip>
                </a-space>
              </template>
              <template v-if="item.key === 'message'" #cell="{ record }">
                <span>{{ record.message }}</span>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="pagination3" />
      </div>
      <div v-if="logType == 2">
        <cardTable
          :tablist="retailList"
          :load="retailLoad"
          :bordered="tables.bordered"
          :striped="tables.striped"
          :url="recordDistributionAdminList"
          :export-url="exportRecordDistributionAdminList"
          :export-name="'卡板分销管理详情列表'"
          :nameski="0"
        />
        <TableFooter :pagination="paginationRetail" />
      </div>
      <div v-if="logType == 3">
        <cardTable
          :tablist="recycleList"
          :load="recycleLoad"
          :bordered="tables.bordered"
          :striped="tables.striped"
          :url="recordRecoveryAdminList"
          :export-url="exportRecordRecoveryAdminList"
          :export-name="'卡板回收管理详情列表'"
          :nameski="0"
        />
        <TableFooter :pagination="paginationRecycle" />
      </div>
      <div v-if="logType == 4">
        <a-table
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :loading="modifyLoad"
          :data="modifyList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          :columns="modifyColumns.list"
          table-layout-fixed
          hide-expand-button-on-empty
          :default-expand-all-rows="true"
        >
          <template #columns>
            <a-table-column
              v-for="item of modifyColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'total'" #cell="{ record }">
                <a-space>
                  <a-button
                    size="small"
                    type="text"
                    class="butten"
                    @click="detailModify(record.id, '')"
                  >
                    {{ record.total }} 张
                  </a-button>
                </a-space>
              </template>
              <template v-if="item.key === 'remarks'" #cell="{ record }">
                {{ record.remarks ? record.remarks : '- - -' }}
              </template>
              <template v-if="item.key === 'success'" #cell="{ record }">
                <a-space>
                  <a-button
                    size="small"
                    type="text"
                    class="butten"
                    @click="detailModify(record.id, true)"
                  >
                    {{ record.success }} 张
                  </a-button>
                </a-space>
              </template>
              <template v-if="item.key === 'error'" #cell="{ record }">
                <a-space>
                  <a-button
                    size="small"
                    type="text"
                    class="butten"
                    @click="detailModify(record.id, false)"
                  >
                    {{ record.error }} 张
                  </a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="paginationModify" />
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 修改系列详情 -->
    <a-modal v-model:visible="visibleModify" width="750px" hide-cancel>
      <template #title> 查看详情 </template>
      <div>
        <a-space>
          <a-button type="outline" status="warning" :loading="loadings" @click="exportExcelList">
            <template #icon>
              <icon-send />
            </template>
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>导出</template>
          </a-button>
        </a-space>
        <a-table
          style="margin-top: 20px"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :loading="cardModifyLoading"
          :data="cardModifyList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          :columns="modifyColumns.cardList"
          table-layout-fixed
          hide-expand-button-on-empty
          :default-expand-all-rows="true"
        >
          <template #columns>
            <a-table-column
              v-for="item of modifyColumns.cardList"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            />
          </template>
        </a-table>

        <TableFooter ref="tableFooterRef" :pagination="paginationModifyInfo" />
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 退款 -->
    <a-modal
      v-model:visible="visibles"
      :on-before-close="beforeClose"
      :mask-closable="false"
      width="800px"
      title="订单退款"
    >
      <div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f2f3f5;
            width: 100%;
            height: 70px;
            padding: 0 50px;
          "
        >
          <div>
            <div style="text-align: center">{{ detail.obj.totalTraffic }}</div>
            <div>总流量</div>
          </div>

          <div>
            <div style="text-align: center">{{ detail.obj.usedTraffic }}</div>
            <div>已用流量</div>
          </div>
          <div>
            <div style="text-align: center">{{
              detail.flowUsed >= 1024
                ? Math.floor((detail.flowUsed / 1024) * 100) / 100 + 'G'
                : detail.flowUsed > 0 && detail.flowUsed < 1024
                ? Math.floor(detail.flowUsed * 100) / 100 + 'M'
                : 0 + 'M'
            }}</div>
            <div>真实已用</div>
          </div>
          <div>
            <div style="text-align: center">{{ detail.obj.remainingTraffic }}</div>
            <div>剩余流量</div>
          </div>
          <div>
            <div style="text-align: center">{{ detail.obj.remainingRatio }}</div>
            <div>剩余比例</div>
          </div>
        </div>
        <div style="font-size: 11px; color: #86909c; margin-bottom: 20px; margin-top: 10px"
          >如果是API的卡，流量数据无法正常显示，请忽略流量数据</div
        >
        <a-form ref="details" :model="detail">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="value1" label="订单ID" label-col-flex="80px">
                <a-input v-model="detail.id" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value2" label="订单号" label-col-flex="80px">
                <a-input v-model="detail.outTradeNo" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value2" label="套餐名称" label-col-flex="80px">
                <a-input v-model="detail.setMealName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值时间" label-col-flex="80px">
                <a-input v-model="detail.createTime" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值途径" label-col-flex="80px">
                <a-input v-model="detail.typeName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值金额" label-col-flex="80px">
                <a-input v-model="detail.paymentAmount" readonly />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="value3" label="订单佣金" label-col-flex="80px">
                <a-input v-model="detail.rebate" readonly />
                <template #extra>
                  <div>本条订单产生的佣金</div>
                </template>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="收回返佣" label-col-flex="80px">
                <a-radio-group class="radio-bcg" v-model="detail.recovery">
                  <a-radio :value="true">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div> </div
                        ><div className="custom-radio-card-title">收回</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="false">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div> </div
                        ><div className="custom-radio-card-title">不收回</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
                <template #extra>
                  <div>收回佣金，将会对本条订单产生的佣金全部收回</div>
                </template>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="原路途径" label-col-flex="80px">
                <a-input v-model="detail.typeName" readonly />
                <template #extra>
                  <div>原路退款的途径</div>
                </template>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款金额" label-col-flex="80px">
                <a-input-number
                  style="background-color: #fff; border: 1px solid #f2f3f5"
                  v-model="detail.refundAmount"
                />
                <template #extra>
                  <div>退款金额是指推给客户的金额</div>
                </template>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款备注" label-col-flex="80px">
                <a-input
                  style="background-color: #fff; border: 1px solid #f2f3f5"
                  v-model="detail.refundRemarks"
                  placeholder="请输入退款备注"
                />
                <template #extra>
                  <div>退款备注，非必填</div>
                </template>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <template #footer>
        <a-space style="width: 100%; display: flex; justify-content: center">
          <a-button type="primary" @click="refundFn(1)">原路退款</a-button>
          <a-button type="primary" status="success" @click="refundFn(0)">手动退款</a-button>
          <a-button type="primary" status="success" @click="refundFn(2)">余额退款</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 智能检测 -->
    <a-modal
      v-model:visible="detectionVisible"
      title="智能检测"
      width="610px"
      :mask-closable="false"
      title-align="start"
    >
      <div class="table">
        <a-alert style="margin-bottom: 20px; background-color: #e8f7ff">
          <span style="color: #3491fa">
            因运营商数据可能存在延迟，智能检测结果可能存在不准确因素！</span
          >
          <template #icon> <icon-notification /> </template>
        </a-alert>
        <a-alert
          v-if="
            (!cardDetail.exceptionType &&
              cardDetail.officialRealName == 0 &&
              cardDetail.free > 0 &&
              cardDetail.firstPayTime &&
              cardDetail.state == 0) ||
            (!cardDetail.exceptionType &&
              cardDetail.officialRealName == 0 &&
              !cardDetail.free &&
              cardDetail.firstPayTime &&
              cardDetail.state == 0)
          "
          style="margin-bottom: 20px; background-color: #e8f7ff"
        >
          <span style="color: #3491fa"> 检测结果一切正常！</span>
          <template #icon> <icon-check-circle /> </template>
        </a-alert>
        <a-alert v-else type="error" style="margin-bottom: 20px">
          <span style="color: red" v-if="cardDetail.state != 0">当前卡号状态异常</span>
          <span style="color: red" v-else-if="!cardDetail.firstPayTime">当前卡号未充值套餐</span>
          <span style="color: red" v-else-if="cardDetail.officialRealName !== 0"
            >当前卡号未官方实名</span
          >
          <span style="color: red" v-else-if="cardDetail.free <= 0 && cardDetail.firstPayTime"
            >可用流量已用尽</span
          >
          <span style="color: red" v-else-if="cardDetail.free <= 0">当前流量已用完</span>
          <span style="color: red" v-else-if="cardDetail.chong">{{ cardDetail.chong }}</span>
          <span style="color: red" v-else-if="cardDetail.disconnectionId">达量断网停机</span>
          <span style="color: red" v-else-if="cardDetail.free">
            <span style="color: red" v-if="cardDetail.free + cardDetail.used <= 0"
              >当前卡号未充值本月套餐</span
            >
            <span
              style="color: red"
              v-else-if="
                cardDetail.state == 4 &&
                !cardDetail.exceptionType &&
                cardDetail.firstPayTime &&
                cardDetail.free > 0
              "
              >网络异常</span
            >
          </span>
          <span v-else-if="!cardDetail.free">
            <span style="color: red" v-if="cardDetail.used <= 0">当前卡号未充值本月套餐</span>
            <span
              style="color: red"
              v-else-if="
                cardDetail.state == 4 && !cardDetail.exceptionType && cardDetail.firstPayTime
              "
              >网络异常</span
            >
          </span>
          <template #icon> <icon-close-circle /> </template>
        </a-alert>
        <div class="title">
          <div class="name">检测类型</div>
          <div class="name">检测描述</div>
          <div class="name">检测结果</div>
        </div>
        <div class="list">
          <div class="names">卡板状态</div>
          <div class="names"
            ><a-tag v-if="cardDetail.id" :color="cardDetail.stateName.color">{{
              cardDetail.stateName.name
            }}</a-tag></div
          >
          <div class="names">
            <span v-if="cardDetail.id && cardDetail.state == 0" style="color: #3491fa">正常</span>
            <span v-else style="color: #f53f3f">异常</span>
          </div>
        </div>
        <div class="list">
          <div class="names">总流量</div>
          <div class="names"
            ><span v-if="cardDetail.free != undefined">
              {{ Math.floor(((cardDetail.used + cardDetail.free) / 1024) * 100) / 100 }}G</span
            >
            <span v-else>无限</span></div
          >
          <div class="names">
            <span v-if="cardDetail.id && cardDetail.free == 0" style="color: #f53f3f">异常</span>
            <span v-else style="color: #3491fa">正常</span></div
          >
        </div>
        <div class="list">
          <div class="names">已用流量</div>
          <div class="names"
            ><span v-if="cardDetail.used != undefined"
              >{{ Math.floor((cardDetail.used / 1024) * 100) / 100 }}G</span
            >
            <span v-else> - - -</span></div
          >
          <div class="names"
            ><span v-if="cardDetail.id && cardDetail.used != undefined" style="color: #3491fa"
              >正常</span
            >
            <span v-else style="color: #f53f3f">异常</span></div
          >
        </div>
        <div class="list">
          <div class="names">剩余流量</div>
          <div class="names"
            ><span v-if="cardDetail.free != undefined"
              >{{ Math.floor((cardDetail.free / 1024) * 100) / 100 }}G</span
            >
            <span v-else>无限</span></div
          >
          <div class="names"
            ><span v-if="cardDetail.id && cardDetail.free == 0" style="color: #f53f3f">异常</span>
            <span v-else style="color: #3491fa">正常</span></div
          >
        </div>
        <div class="list">
          <div class="names">在线状态</div>
          <div class="names"
            ><span v-if="cardDetail.online === 0">在线</span>
            <span v-if="cardDetail.online === 1">下线</span>
            <span v-else>未知</span></div
          >
          <div class="names"
            ><span v-if="cardDetail.online == 0" style="color: #3491fa">正常</span>
            <span v-else style="color: #f53f3f">异常</span></div
          >
        </div>
        <div class="list">
          <div class="names">官方实名</div>
          <div class="names"
            ><a-tag color="blue" v-if="cardDetail.officialRealName == 0">已实名</a-tag>
            <a-tag v-else-if="cardDetail.officialRealName == 1">未实名</a-tag>
            <a-tag v-else>未知</a-tag></div
          >
          <div class="names"
            ><span v-if="cardDetail.id && cardDetail.officialRealName == 0" style="color: #3491fa"
              >正常</span
            >
            <span v-else style="color: #f53f3f">异常</span></div
          >
        </div>
        <div class="list">
          <div class="names">到期时间</div>
          <div class="names"
            ><span v-if="cardDetail.expirationTime">{{ cardDetail.expirationTime }}</span>
            <span v-else>- - -</span></div
          >
          <div class="names"
            ><span v-if="cardDetail.id && cardDetail.expirationTime" style="color: #3491fa"
              >正常</span
            >
            <span v-else style="color: #f53f3f">异常</span></div
          >
        </div>
        <!-- <div class="list">
          <div class="names">检测结果</div>
          <div class="namesa" style="color: #3491fa; line-height: 25px; padding: 10px"
            >检测结果一切正常，若仍然无法使用，请引导客户设置APN然后重启设备，等待5分钟后重试【无需设置APN的请直接忽略】</div
          >
          <div class="namesa" style="color: red">
            <span v-if="!cardDetail.firstPayTime">当前卡号未充值套餐</span>
            <span v-else-if="cardDetail.officialRealName !== 0">当前卡号未官方实名</span>
            <span v-else-if="cardDetail.free <= 0 && cardDetail.firstPayTime">可用流量已用尽</span>
            <span v-else-if="cardDetail.free <= 0">当前流量已用完</span>
            <span v-else-if="cardDetail.chong">{{ cardDetail.chong }}</span>
            <span v-else-if="cardDetail.disconnectionId">达量断网停机</span>
            <span v-else-if="cardDetail.free">
              <span v-if="cardDetail.free + cardDetail.used <= 0">当前卡号未充值本月套餐</span>
              <span
                v-else-if="
                  cardDetail.state == 4 &&
                  !cardDetail.exceptionType &&
                  cardDetail.firstPayTime &&
                  cardDetail.free > 0
                "
                >网络异常</span
              >
            </span>
            <span v-else-if="!cardDetail.free">
              <span v-if="cardDetail.used <= 0">当前卡号未充值本月套餐</span>
              <span
                v-else-if="
                  cardDetail.state == 4 && !cardDetail.exceptionType && cardDetail.firstPayTime
                "
                >网络异常</span
              >
            </span>
          </div>
        </div> -->
        <div style="display: flex; justify-content: space-between; margin-top: 20px">
          <div
            style="
              width: 125px;
              background-color: #f5f5f5;
              height: 40px;
              border-radius: 5px;
              line-height: 40px;
              text-align: center;
            "
            @click="RefreshFn('')"
            >卡板刷新</div
          >
          <div
            style="
              width: 125px;
              background-color: #f5f5f5;
              height: 40px;
              border-radius: 5px;
              line-height: 40px;
              text-align: center;
            "
            @click="startFn"
            >卡板复机</div
          >
          <div
            style="
              width: 125px;
              background-color: #f5f5f5;
              height: 40px;
              border-radius: 5px;
              line-height: 40px;
              text-align: center;
            "
            @click="stopFn"
            >卡板停机</div
          >
          <div
            style="
              width: 125px;
              background-color: #f5f5f5;
              height: 40px;
              border-radius: 5px;
              line-height: 40px;
              text-align: center;
            "
            @click="deleteBindingFn"
            >机卡绑定</div
          >
        </div>
        <!-- <div class="list">
          <div class="names">快捷操作</div>
          <div class="namesa">
            <span v-if="cardDetail.id" style="color: #3491fa; cursor: pointer" @click="RefreshFn"
              >卡板刷新</span
            >
            <span
              v-if="cardDetail.id"
              style="margin-left: 15px; color: #f53f3f; cursor: pointer"
              @click="stopFn"
              >卡板停机</span
            >
            <span
              v-if="cardDetail.id"
              style="margin-left: 15px; color: #00b42a; cursor: pointer"
              @click="startFn"
              >卡板复机</span
            >
          </div>
        </div> -->
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 历史用量 -->
    <a-drawer
      v-model:visible="lishi"
      title="历史用量"
      width="846px"
      :mask-closable="false"
      title-align="start"
      :footer="false"
    >
      <div style="padding: 20px">
        <div class="box-top">
          <div class="top-item">
            <div class="title1">上游已用</div>
            <div class="num"
              >{{
                cardDetail.upstreamFlow > 0
                  ? Math.floor((cardDetail.upstreamFlow / 1024) * 100) / 100
                  : '0'
              }}G<icon-refresh
                @click="RefreshFn('')"
                style="margin-left: 10px; font-size: 18px; color: #3491fa"
            /></div>
          </div>
          <div class="top-items">
            <div class="title1">今日已用</div>
            <div class="num">{{ useCommon.numbers1(topForm.today) }}</div>
          </div>
          <div class="top-items"
            ><div class="title1">30天已用</div>
            <div class="num">{{ useCommon.numbers1(topForm.total) }}</div></div
          >
          <div class="top-items"
            ><div class="title1">30日单日最高</div>
            <div class="num">{{ useCommon.numbers1(topForm.max) }}</div></div
          >
          <!-- <div class="top-items"
            ><div class="title1">30日单日最低</div>
            <div class="num">{{ useCommon.numbers1(topForm.min) }}次</div></div
          > -->
        </div>
        <div class="box" style="margin-top: 20px">
          <div class="line"></div>
          <div class="text">近30天使用折线图 </div>
        </div>
        <div id="opnhggggggggggg" style="width: 806px; height: 284px"></div>
        <div class="box">
          <div class="line"></div>
          <div class="text">使用详细记录 </div>
        </div>
        <div style="display: flex; justify-content: space-between; margin-bottom: 10px">
          <div>
            <a-input-group>
              <a-input hide-button v-model="lishiForm.addRealUsed" placeholder="开始真实已用" />
              <a-input hide-button v-model="lishiForm.endRealUsed" placeholder="结束真实已用" />
            </a-input-group>
            <a-button style="margin-left: 10px" type="primary" @click="doRefreshOperate1(1)"
              >搜索</a-button
            >
          </div>
          <div>
            <a-trigger trigger="hover">
              <a-button shape="circle">
                <icon-select-all />
              </a-button>
              <template #content>
                <div style="background-color: #ffffff; padding: 10px">
                  <div> <a-checkbox @change="changeFn2" v-model="chack2">真实已用</a-checkbox></div>
                  <div
                    ><a-checkbox @change="changeFn3" v-model="chack3">真实总已用</a-checkbox></div
                  >
                  <div>
                    <a-checkbox @change="changeFn" v-model="chack">使用流量</a-checkbox>
                  </div>
                  <div
                    ><a-checkbox @change="changeFn1" v-model="chack1">总使用流量</a-checkbox></div
                  >

                  <div><a-checkbox @change="changeFn4" v-model="chack4">记录时间</a-checkbox></div>
                </div>
              </template>
            </a-trigger>
          </div>
        </div>
        <a-table :pagination="false" :loading="load4" :data="rebateListse1">
          <template #columns>
            <a-table-column
              v-for="item of columns4"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'time'" #cell="{ record }">
                <span>{{ dateTime(record.time) }}</span>
              </template>
              <template v-if="item.key === 'realUsed'" #cell="{ record }">
                <span>{{ useCommon.numbers1(record.realUsed) }}</span>
              </template>
              <template v-if="item.key === 'used'" #cell="{ record }">
                <span>{{ useCommon.numbers1(record.used) }}</span>
              </template>
              <template v-if="item.key === 'totalUsed'" #cell="{ record }">
                <span>{{ useCommon.numbers1(record.totalUsed) }}</span>
              </template>
              <template v-if="item.key === 'totalRealUsed'" #cell="{ record }">
                <span>{{ useCommon.numbers1(record.totalRealUsed) }}</span>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <TableFooter :pagination="pagination4" />
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-drawer>
    <!-- 卡板矫正 -->
    <a-modal
      v-model:visible="jiaozheng"
      @before-close="jiaoCFn"
      title="卡板矫正"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="jiaoRef" :auto-label-width="true" :model="correctForm">
        <a-form-item
          field="apiCard"
          label="接口卡号"
          :rules="[{ required: true, message: '接口卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input
            v-model="correctForm.apiCard"
            :max-length="30"
            placeholder="请输入接口卡号"
            allow-clear
          />
        </a-form-item>
        <a-form-item
          field="iccid"
          label="完整卡号"
          :rules="[{ required: true, message: 'iccid不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input
            v-model="correctForm.iccid"
            :max-length="30"
            placeholder="请输入完整卡号"
            allow-clear
          />
        </a-form-item>
        <a-form-item
          field="card"
          label="显示卡号"
          :rules="[{ required: true, message: '显示卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input
            v-model="correctForm.card"
            :max-length="30"
            placeholder="请输入显示卡号"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="realNameCard" label="实名卡号">
          <a-input
            v-model="correctForm.realNameCard"
            :max-length="30"
            placeholder="请输入实名卡号"
            allow-clear
          />
        </a-form-item>
        <a-form-item field=" imei" label="imei">
          <a-input
            v-model="correctForm.imei"
            :max-length="30"
            placeholder="请输入 imei"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="imsi" label="imsi">
          <a-input
            v-model="correctForm.imsi"
            :max-length="30"
            placeholder="请输入imsi"
            allow-clear
          />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="jiaoCFn">取消</a-button>
          <a-button type="primary" :loading="loading11" @click="jiaoQue">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 添加优惠券 -->
    <a-modal
      v-model:visible="remarkV"
      @before-close="remarkClose"
      title="券包充值"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="remarkRef" :auto-label-width="true" :model="couponForm">
        <a-form-item
          field="couponId"
          label="优惠券"
          :rules="[{ required: true, message: '优惠券不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-select v-model="couponForm.couponId" allow-clear placeholder="请选择优惠券">
            <a-option
              v-for="item in couponList[0].seriesCouponList"
              :key="item.id"
              :value="item.id"
              >{{ item.couponName }}</a-option
            >
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="remarkClose">取消</a-button>
          <a-button type="primary" @click="remarkSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 编辑订单 -->
    <a-modal
      v-model:visible="orderTimeShow"
      @before-close="closeOrderTime"
      title="编辑订单"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form :auto-label-width="true" :model="detail">
        <a-form-item field="effectiveState" label="订单ID" asterisk-position="end">
          <div class="radio-bcg">{{ detail.id }}</div>
        </a-form-item>
        <a-form-item field="effectiveState" label="套餐名称" asterisk-position="end">
          <div class="radio-bcg">{{ detail.setMealName }}</div>
        </a-form-item>
        <a-form-item
          v-if="detail.flowReal"
          field="flowReal"
          label="系统流量"
          asterisk-position="end"
        >
          <a-input-number
            v-model="detail.flowReal"
            placeholder="请输入系统流量(单位MB)"
            hide-button
            allow-clear
          >
            <template #append>
              <a-button type="primary" @click="change1024s(detail.flowReal, 1)"> 换算 </a-button>
            </template>
          </a-input-number>
        </a-form-item>
        <a-form-item
          v-if="detail.flowVirtual"
          field="flowVirtual"
          label="显示流量"
          asterisk-position="end"
        >
          <a-input-number
            v-model="detail.flowVirtual"
            placeholder="请输入显示流量(单位MB)"
            hide-button
            allow-clear
          >
            <template #append>
              <a-button type="primary" @click="change1024s(detail.flowVirtual, 3)"> 换算 </a-button>
            </template>
          </a-input-number>
        </a-form-item>
        <a-form-item field="effectiveState" label="开始时间" asterisk-position="end">
          <a-select
            v-model="detail.effectiveState"
            @change="changeTimeFn1111(detail)"
            placeholder="请选择订单时间"
          >
            <a-option :value="0">立即生效</a-option>
            <a-option :value="1">本月生效</a-option>
            <a-option :value="2">次月生效</a-option>
            <a-option :value="3">月底顺延</a-option>
            <a-option :value="4">跨月顺延</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="effectiveTime" label="开始时间" asterisk-position="end">
          <a-date-picker
            style="width: 100%"
            v-model="detail.effectiveTime"
            show-time
            :allow-clear="false"
            placeholder="请选择开始时间"
            :disabledDate="changeTraceEnd"
            :time-picker-props="{ defaultValue: '12:00:00' }"
            format="YYYY-MM-DD HH:mm:ss"
            :shortcuts="[
              {
                label: '本月时间',
                value: () => (
                  (detail.effectiveTime = $dayjs(detail.createTime).format('YYYY-MM-DD HH:mm:ss')),
                  (detail.expirationTime = $dayjs(detail.createTime)
                    .endOf('month')
                    .format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
              {
                label: '次月时间',
                value: () => (
                  (detail.effectiveTime = $dayjs(detail.createTime)
                    .add(1, 'month')
                    .startOf('month')
                    .format('YYYY-MM-DD HH:mm:ss')),
                  (detail.expirationTime = $dayjs(detail.createTime)
                    .add(1, 'month')
                    .endOf('month')
                    .format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
            ]"
          />
        </a-form-item>
        <a-form-item field="expirationTime" label="结束时间" asterisk-position="end">
          <a-date-picker
            style="width: 100%"
            v-model="detail.expirationTime"
            show-time
            :allow-clear="false"
            placeholder="请选择结束时间"
            :disabledDate="changeTraceStart"
            :time-picker-props="{ defaultValue: '12:00:00' }"
            format="YYYY-MM-DD HH:mm:ss"
            :shortcuts="[
              {
                label: '本月时间',
                value: () => (
                  (detail.effectiveTime = $dayjs(detail.createTime).format('YYYY-MM-DD HH:mm:ss')),
                  (detail.expirationTime = $dayjs(detail.createTime)
                    .endOf('month')
                    .format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
              {
                label: '次月时间',
                value: () => (
                  (detail.effectiveTime = $dayjs(detail.createTime)
                    .add(1, 'month')
                    .startOf('month')
                    .format('YYYY-MM-DD HH:mm:ss')),
                  (detail.expirationTime = $dayjs(detail.createTime)
                    .add(1, 'month')
                    .endOf('month')
                    .format('YYYY-MM-DD HH:mm:ss'))
                ),
              },
            ]"
          />
        </a-form-item>
        <a-form-item field="switchOperator" label="设备网络">
          <a-checkbox-group v-model="detail.switchOperator">
            <a-checkbox :value="0">
              <template #checkbox="{ checked }">
                <div
                  align="start"
                  class="custom-checkbox-card"
                  :class="{ 'custom-checkbox-card-checked': checked }"
                >
                  <div>
                    <div className="custom-checkbox-card-title"
                      ><img src="@/assets/yd.png" alt="" /> 移动
                    </div>
                  </div>
                </div>
              </template>
            </a-checkbox>
            <a-checkbox :value="1">
              <template #checkbox="{ checked }">
                <div
                  align="start"
                  class="custom-checkbox-card"
                  :class="{ 'custom-checkbox-card-checked': checked }"
                >
                  <div>
                    <div className="custom-checkbox-card-title">
                      <img src="@/assets/lt.png" alt="" />联通
                    </div>
                  </div>
                </div>
              </template>
            </a-checkbox>
            <a-checkbox :value="2">
              <template #checkbox="{ checked }">
                <div
                  align="start"
                  class="custom-checkbox-card"
                  :class="{ 'custom-checkbox-card-checked': checked }"
                >
                  <div>
                    <div className="custom-checkbox-card-title"
                      ><img src="@/assets/dx.png" alt="" /> 电信
                    </div>
                  </div>
                </div>
              </template>
            </a-checkbox>
            <a-checkbox :value="3">
              <template #checkbox="{ checked }">
                <div
                  align="start"
                  class="custom-checkbox-card"
                  :class="{ 'custom-checkbox-card-checked': checked }"
                >
                  <div>
                    <div className="custom-checkbox-card-title"
                      ><img src="@/assets/gd.png" alt="" /> 广电
                    </div>
                  </div>
                </div>
              </template>
            </a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item field="remarks" label="订单备注">
          <a-input v-model="detail.remarks" placeholder="请输入订单备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="closeOrderTime">取消</a-button>
          <a-button type="primary" @click="orderTimeFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 余额订单详情 -->
    <a-modal
      v-model:visible="balanceOrderDetailVisible"
      :mask-closable="false"
      width="800px"
      title="订单详情"
    >
      <div>
        <a-descriptions :column="2" align="center" title="基础信息" bordered>
          <a-descriptions-item label="客户账号">
            <span v-if="balanceOrderDetail.user">{{ balanceOrderDetail.user.userName }}</span>
            <span v-else>管理员</span>
          </a-descriptions-item>
          <a-descriptions-item label="所属渠道">{{
            balanceOrderDetail.series.channel.name
          }}</a-descriptions-item>
          <a-descriptions-item label="所属系列">{{
            balanceOrderDetail.series.name
          }}</a-descriptions-item>
          <a-descriptions-item label="订单类型">
            <a-tag color="blue" v-if="balanceOrderDetail.number == 1"
              >首充{{ balanceOrderDetail.number }}</a-tag
            >
            <a-tag color="red" v-else>续充{{ balanceOrderDetail.number }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="订单状态"
            ><a-tag color="red" v-if="balanceOrderDetail.refundType">退款</a-tag>
            <a-tag color="blue" v-else>成功</a-tag>
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions
          style="margin-top: 20px"
          :column="2"
          align="center"
          title="支付信息"
          bordered
        >
          <a-descriptions-item label="充值途径"
            ><div v-if="balanceOrderDetail.type == 0"> 支付宝</div>
            <div v-if="balanceOrderDetail.type == 1"> 微信</div></a-descriptions-item
          >
          <a-descriptions-item label="充值金额"
            >{{
              Math.floor(
                (balanceOrderDetail.receivedAmount - balanceOrderDetail.giveAmount) * 100
              ) / 100
            }}
            元</a-descriptions-item
          >
          <a-descriptions-item label="赠送金额"
            >{{ balanceOrderDetail.giveAmount }} 元</a-descriptions-item
          >
          <a-descriptions-item label="立减金额"
            >{{ balanceOrderDetail.reductionAmount }} 元</a-descriptions-item
          >
          <a-descriptions-item label="到账金额"
            >{{ balanceOrderDetail.receivedAmount }} 元</a-descriptions-item
          >
          <a-descriptions-item label="实付金额"
            >{{ balanceOrderDetail.paymentAmount }}元</a-descriptions-item
          >
          <a-descriptions-item label="充值时间">{{
            balanceOrderDetail.createTime
          }}</a-descriptions-item>
          <a-descriptions-item label="客户IP">{{ balanceOrderDetail.ip }}</a-descriptions-item>
          <a-descriptions-item label="支付名称">{{
            balanceOrderDetail.payTemplate.name
          }}</a-descriptions-item>
          <a-descriptions-item label="支付商户号">{{
            balanceOrderDetail.payTemplate.merchantNo
          }}</a-descriptions-item>
          <a-descriptions-item label="商户订单号">{{
            balanceOrderDetail.outTradeNo
          }}</a-descriptions-item>
          <a-descriptions-item label="支付订单号">{{
            balanceOrderDetail.tradeNo
          }}</a-descriptions-item>
        </a-descriptions>
        <a-descriptions
          style="margin-top: 20px"
          :column="2"
          align="center"
          title="其他信息"
          bordered
        >
          <a-descriptions-item label="退款类型">
            <div v-if="balanceOrderDetail.refundType == 0"> 标记退款</div>
            <div v-else-if="balanceOrderDetail.refundType == 1"> 原路退回</div>
            <div v-else>- - -</div>
          </a-descriptions-item>
          <a-descriptions-item label="退款时间"
            >{{ balanceOrderDetail.refundTime ? balanceOrderDetail.refundTime : '- - -' }}
          </a-descriptions-item>
          <a-descriptions-item label="退款金额"
            >{{ balanceOrderDetail.refundAmount }}元</a-descriptions-item
          >
          <a-descriptions-item label="退款备注">{{
            balanceOrderDetail.refundRemarks ? balanceOrderDetail.refundRemarks : '- - -'
          }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </a-modal>
    <!-- 余额订单退款 -->
    <a-modal
      v-model:visible="balanceRefundVisible"
      :on-before-close="beforeClose"
      :mask-closable="false"
      width="800px"
      title="订单退款"
    >
      <div>
        <a-form ref="details" :model="balanceOrderDetail">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="value1" label="订单ID" label-col-flex="80px">
                <a-input v-model="balanceOrderDetail.id" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value2" label="充值金额" label-col-flex="80px">
                <a-input v-model="balanceOrderDetail.paymentAmount" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="总到账" label-col-flex="80px">
                <a-input v-model="balanceOrderDetail.receivedAmount" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值时间" label-col-flex="80px">
                <a-input v-model="balanceOrderDetail.createTime" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="账户余额" label-col-flex="80px">
                <a-input v-model="balanceOrderDetail.balance" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值途径" label-col-flex="80px">
                <a-input v-model="balanceOrderDetail.typeName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款途径" label-col-flex="80px">
                <a-input v-model="balanceOrderDetail.typeName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款金额" label-col-flex="80px">
                <a-input-number
                  style="background-color: #fff; border: 1px solid #f2f3f5"
                  v-model="balanceOrderDetail.refundAmount"
                  :min="0"
                  :max="balanceOrderDetail.paymentAmount"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="扣除余额" label-col-flex="80px">
                <a-input-number
                  style="background-color: #fff; border: 1px solid #f2f3f5"
                  v-model="balanceOrderDetail.deductionAmount"
                  :min="0"
                  :max="balanceOrderDetail.paymentAmount"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款备注" label-col-flex="80px">
                <a-input
                  style="background-color: #fff; border: 1px solid #f2f3f5"
                  v-model="balanceOrderDetail.refundRemarks"
                  placeholder="请输入退款备注"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <template #footer>
        <a-space style="width: 100%; display: flex; justify-content: center">
          <a-button type="primary" @click="refundBalanceFn(1)">原路退款</a-button>
          <a-button type="primary" status="success" @click="refundBalanceFn(0)">手动退款</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 实名订单详情 -->
    <a-modal
      v-model:visible="realOrderDetailVisible"
      :mask-closable="false"
      width="800px"
      title="订单详情"
    >
      <div>
        <a-descriptions :column="2" align="center" title="基础信息" bordered>
          <a-descriptions-item label="客户账号"
            ><span v-if="realOrderDetail.user">{{ realOrderDetail.user.userName }}</span>
            <span v-else>管理员</span>
          </a-descriptions-item>
          <a-descriptions-item label="订单类型"
            ><a-tag color="red" v-if="realOrderDetail.refundType">退款</a-tag>
            <a-tag color="blue" v-else>成功</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="订单状态"
            ><a-tag color="red" v-if="realOrderDetail.refundType">退款</a-tag>
            <a-tag color="blue" v-else>成功</a-tag>
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions
          style="margin-top: 20px"
          :column="2"
          align="center"
          title="支付信息"
          bordered
        >
          <a-descriptions-item label="充值途径"
            ><div v-if="realOrderDetail.type == 0"> 支付宝</div>
            <div v-if="realOrderDetail.type == 1"> 微信</div></a-descriptions-item
          >
          <a-descriptions-item label="充值金额"
            >{{ realOrderDetail.paymentAmount }}元</a-descriptions-item
          >
          <a-descriptions-item label="充值时间">{{
            realOrderDetail.createTime
          }}</a-descriptions-item>
          <a-descriptions-item label="支付名称">{{
            realOrderDetail.payTemplate.name
          }}</a-descriptions-item>
          <a-descriptions-item label="支付商户号">{{
            realOrderDetail.payTemplate.merchantNo
          }}</a-descriptions-item>
          <a-descriptions-item label="商户订单号">{{
            realOrderDetail.outTradeNo
          }}</a-descriptions-item>
          <a-descriptions-item label="支付订单号">{{
            realOrderDetail.tradeNo
          }}</a-descriptions-item>
        </a-descriptions>
        <a-descriptions
          style="margin-top: 20px"
          :column="2"
          align="center"
          title="快捷操作"
          bordered
        >
          <a-descriptions-item label="快捷操作">
            <a-button
              @click="detailRealFn(detail)"
              style="padding: 0px 4px"
              type="text"
              size="small"
              status="warning"
              >退款</a-button
            >
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-modal>
    <!-- 实名订单退款 -->
    <a-modal
      v-model:visible="realRefundVisible"
      :on-before-close="beforeClose"
      :mask-closable="false"
      width="800px"
      title="订单退款"
    >
      <div>
        <a-form ref="details" :model="realOrderDetail">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="value1" label="订单ID" label-col-flex="80px">
                <a-input v-model="realOrderDetail.id" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value2" label="充值金额" label-col-flex="80px">
                <a-input v-model="realOrderDetail.paymentAmount" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值时间" label-col-flex="80px">
                <a-input v-model="realOrderDetail.createTime" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值途径" label-col-flex="80px">
                <a-input v-model="realOrderDetail.typeName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款途径" label-col-flex="80px">
                <a-input v-model="realOrderDetail.typeName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款金额" label-col-flex="80px">
                <a-input-number
                  style="background-color: #fff; border: 1px solid #f2f3f5"
                  v-model="realOrderDetail.refundAmount"
                  :min="0"
                  :max="realOrderDetail.paymentAmount"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款备注" label-col-flex="80px">
                <a-input
                  style="background-color: #fff; border: 1px solid #f2f3f5"
                  v-model="realOrderDetail.refundRemarks"
                  placeholder="请输入退款备注"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <template #footer>
        <a-space style="width: 100%; display: flex; justify-content: center">
          <a-button type="primary" @click="refundRealFn">原路退款</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 处理邮费订单 -->
    <a-modal
      v-model:visible="stateVisible"
      @before-close="closeState"
      title="处理邮费订单"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="stateRef" :model="stateFrom">
        <a-form-item field="state" label="换卡状态">
          <a-select v-model="stateFrom.state" placeholder="请选择换卡状态" allow-clear>
            <a-option :value="0">等待审核</a-option>
            <a-option :value="1">正在审核</a-option>
            <a-option :value="2">审核成功</a-option>
            <a-option :value="3">审核驳回</a-option>
            <a-option :value="4">退款</a-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item field="value1" label="发送通知">
          <a-select v-model="stateFrom.state" placeholder="请选择发送通知" allow-clear>
            <a-option value="0">不通知</a-option>
            <a-option value="1">微信通知</a-option>
            <a-option value="2">短信通知</a-option>
          </a-select>
        </a-form-item> -->
        <a-form-item
          field="logisticNumber"
          v-if="stateFrom.state == 2"
          :rules="[{ required: true, message: '快递单号不能为空' }]"
          label="快递单号"
          asterisk-position="end"
        >
          <a-input v-model="stateFrom.logisticNumber" placeholder="请输入快递单号" allow-clear />
        </a-form-item>
        <a-form-item
          field="card"
          v-if="stateFrom.state == 2"
          :rules="[{ required: true, message: '新卡号不能为空' }]"
          label="新卡号"
          asterisk-position="end"
        >
          <a-input v-model="stateFrom.card" placeholder="请输入新卡号" allow-clear />
        </a-form-item>
        <a-form-item
          field="refundType"
          v-if="stateFrom.state == 4"
          :rules="[{ required: true, message: '退款类型不能为空' }]"
          label="退款类型"
          asterisk-position="end"
        >
          <a-select v-model="stateFrom.refundType" placeholder="请选择退款类型" allow-clear>
            <a-option value="0">标记退款</a-option>
            <a-option value="1">原路退回</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          field="refundAmount"
          v-if="stateFrom.state == 4"
          :rules="[{ required: true, message: '退款金额不能为空' }]"
          label="退款金额"
          asterisk-position="end"
        >
          <a-input v-model="stateFrom.refundAmount" placeholder="请输入退款金额" allow-clear />
        </a-form-item>
        <a-form-item field="handlerRemarks" label="处理备注">
          <a-textarea
            v-model="stateFrom.handlerRemarks"
            placeholder="请输入处理备注"
            allow-clear
          /> </a-form-item
      ></a-form>
      <template #footer>
        <a-space>
          <a-button @click="closeState">取消</a-button>
          <a-button type="primary" @click="updateState">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 券包详情 -->
    <a-modal v-model:visible="visibleCoupon" :mask-closable="false" width="800px" title="订单详情">
      <div>
        <a-descriptions :column="2" align="center" title="基础信息" bordered>
          <a-descriptions-item label="客户账号">{{
            detailCoupon.user ? detailCoupon.user.userName : '管理员'
          }}</a-descriptions-item>
          <!-- <a-descriptions-item label="订单类型"
            ><a-tag color="blue" v-if="detail.isFirst == true">首充{{ detail.number }}</a-tag>
            <a-tag color="red" v-if="detail.isFirst == false"
              >续订{{ detail.number }}</a-tag
            ></a-descriptions-item
          > -->
          <a-descriptions-item label="订单状态"
            ><a-tag color="blue" v-if="detailCoupon.state == 0">正常</a-tag>
            <a-tag color="red" v-if="detailCoupon.state == 1">退款</a-tag></a-descriptions-item
          >
          <a-descriptions-item label="优惠券名称">{{
            detailCoupon.couponName
          }}</a-descriptions-item>
          <a-descriptions-item label="优惠券数量"
            >{{ detailCoupon.couponCount }}张</a-descriptions-item
          >
          <a-descriptions-item label="优惠券总金额"
            >{{ detailCoupon.couponAllAmount }}元</a-descriptions-item
          >
          <a-descriptions-item label="剩余优惠券">{{
            detailCoupon.couponName
          }}</a-descriptions-item>
          <a-descriptions-item label="剩余总金额"
            >{{ detailCoupon.couponAmount }}元</a-descriptions-item
          >
        </a-descriptions>
        <a-descriptions
          :column="2"
          align="center"
          title="支付信息"
          style="margin-top: 20px"
          bordered
        >
          <a-descriptions-item label="充值途径">
            <div v-if="detailCoupon.type == 0"> 支付宝</div>
            <div v-if="detailCoupon.type == 1"> 微信</div>
            <div v-if="detailCoupon.type == 2"> 批量</div>
            <div v-if="detailCoupon.type == 3"> 赠送</div></a-descriptions-item
          >
          <a-descriptions-item label="充值金额">{{
            detailCoupon.paymentAmount
          }}</a-descriptions-item>
          <a-descriptions-item label="充值时间">{{ detailCoupon.addTime }}</a-descriptions-item>
          <a-descriptions-item label="过期时间">{{ detailCoupon.endTime }}</a-descriptions-item>
          <a-descriptions-item label="首次使用">{{
            detailCoupon.addUseTime ? detailCoupon.addUseTime : '---'
          }}</a-descriptions-item>
          <a-descriptions-item label="最近使用">{{
            detailCoupon.endUseTime ? detailCoupon.endUseTime : '---'
          }}</a-descriptions-item>
          <a-descriptions-item label="客户IP">{{ detailCoupon.ip }}</a-descriptions-item>
          <a-descriptions-item label="支付ID">{{ detailCoupon.payTemplateId }}</a-descriptions-item>
          <!-- <a-descriptions-item label="支付名称">{{ detail.couponAmount }}元</a-descriptions-item>
          <a-descriptions-item label="支付商户号">{{ detail.outTradeNo }}元</a-descriptions-item> -->
          <a-descriptions-item label="商户订单号">{{
            detailCoupon.outTradeNo
          }}</a-descriptions-item>
          <a-descriptions-item label="支付订单号">{{
            detailCoupon.tradeNo
          }}</a-descriptions-item></a-descriptions
        >
        <a-descriptions
          style="margin-top: 20px"
          :column="1"
          align="center"
          title="订单操作"
          bordered
        >
          <a-descriptions-item label="快捷操作">
            <a-button
              @click="openCouponState(detailCoupon)"
              style="padding: 0px 4px"
              type="text"
              size="small"
              status="warning"
              >退款</a-button
            >
          </a-descriptions-item>
          <a-descriptions-item label="修改到期时间">
            <a-date-picker
              style="width: 50%"
              v-model="detailCoupon.endTime"
              show-time
              :picker-options="endTime"
              @change="changeEndTime"
              placeholder="请选择结束使用时间"
              :time-picker-props="{ defaultValue: '12:00:00' }"
              format="YYYY-MM-DD HH:mm:ss"
              allow-clear
            />
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 优惠券退款 -->
    <a-modal
      v-model:visible="stateVisiblesa"
      @before-close="closeStateCoupon"
      title="优惠券退款"
      width="800px"
      :mask-closable="false"
      title-align="start"
    >
      <div>
        <a-form ref="details" :model="detailCoupon">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="value1" label="订单ID" label-col-flex="80px">
                <a-input v-model="detailCoupon.id" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value2" label="券包名称" label-col-flex="80px">
                <a-input v-model="detailCoupon.couponName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值时间" label-col-flex="80px">
                <a-input v-model="detailCoupon.addTime" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="券包数量" label-col-flex="80px">
                <a-input v-model="detailCoupon.couponCount" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="使用数量" label-col-flex="80px">
                <a-input v-model="detailCoupon.nums" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="剩余数量" label-col-flex="80px">
                <a-input v-model="detailCoupon.num" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="支付金额" label-col-flex="80px">
                <a-input v-model="detailCoupon.paymentAmount" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="优惠金额" label-col-flex="80px">
                <a-input v-model="detailCoupon.randomReduction" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值途径" label-col-flex="80px">
                <a-input v-model="detailCoupon.typeName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款途径" label-col-flex="80px">
                <a-input v-model="detailCoupon.typeName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款金额" label-col-flex="80px">
                <a-input-number
                  style="background-color: #fff; border: 1px solid #f2f3f5"
                  v-model="detailCoupon.refundAmount"
                  :min="0"
                  :max="detailCoupon.paymentAmount"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款备注" label-col-flex="80px">
                <a-input
                  style="background-color: #fff; border: 1px solid #f2f3f5"
                  v-model="detailCoupon.refundRemarks"
                  placeholder="请输入退款备注"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <template #footer>
        <a-space style="width: 100%; display: flex; justify-content: center">
          <a-button type="primary" @click="refundCouponFn(1)">原路退款</a-button>
          <a-button type="primary" status="success" @click="refundCouponFn(0)">手动退款</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 极速会员退款 -->
    <a-modal
      v-model:visible="stateVisiblekl"
      @before-close="closeState"
      title="极速会员退款"
      width="800px"
      :mask-closable="false"
      title-align="start"
    >
      <div>
        <a-form ref="details" :model="vipForm">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="value1" label="订单ID" label-col-flex="80px">
                <a-input v-model="vipForm.id" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value2" label="会员名称" label-col-flex="80px">
                <a-input v-model="vipForm.vipName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值时间" label-col-flex="80px">
                <a-input v-model="vipForm.payTime" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="支付金额" label-col-flex="80px">
                <a-input v-model="vipForm.paymentAmount" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="会员时间" label-col-flex="80px">
                <div class="radio-bcgs" style="text-align: left; padding-left: 13px"
                  >{{ vipForm.vipTime }}{{ vipForm.vipTimeType == 0 ? '天' : '月' }}</div
                >
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="剩余时间" label-col-flex="80px">
                <div class="radio-bcgs" style="text-align: left; padding-left: 13px"
                  >{{ vipForm.surplusDays }}天</div
                >
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="剩余比例" label-col-flex="80px">
                <div class="radio-bcgs" style="text-align: left; padding-left: 13px"
                  >{{ vipForm.percentage }}%</div
                >
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="充值途径" label-col-flex="80px">
                <a-input v-model="vipForm.typeName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="原路途径" label-col-flex="80px">
                <a-input v-model="vipForm.typeName" readonly />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款金额" label-col-flex="80px">
                <a-input-number
                  style="background-color: #fff; border: 1px solid #f2f3f5"
                  v-model="vipForm.refundAmount"
                  :min="0"
                  :max="vipForm.paymentAmount"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="value3" label="退款备注" label-col-flex="80px">
                <a-input
                  style="background-color: #fff; border: 1px solid #f2f3f5"
                  v-model="vipForm.refundRemarks"
                  placeholder="请输入退款备注"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <template #footer>
        <a-space style="width: 100%; display: flex; justify-content: center">
          <a-button type="primary" @click="refundVipFn(1)">原路退款</a-button>
          <a-button type="primary" status="success" @click="refundVipFn(0)">手动退款</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 修改流量 -->
    <a-modal
      v-model:visible="flowVisible"
      @before-close="flowCFn"
      title="操作流量"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="flowRef" :auto-label-width="true" :model="flowForm">
        <a-form-item
          field="flow"
          label="流量"
          :rules="[{ required: true, message: '流量不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input-number hide-button v-model="flowForm.flow" placeholder="请输入流量" allow-clear>
            <template #append>
              <a-button type="primary" @click="change1024(flowForm.flow)"> 换算 </a-button>
            </template>
          </a-input-number>
          <template #extra>
            <div>矫正流量 正数是增加， 负数是减少</div>
          </template>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="flowCFn">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="flowSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 优惠券详情 -->
    <a-modal
      v-model:visible="visibles1"
      title="优惠券详情"
      width="1000px"
      :mask-closable="false"
      title-align="start"
    >
      <a-table
        :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)"
        :row-class-name="rowClassNameFun"
        :data="sessionList"
        :pagination="false"
        :column-resizable="true"
        :rowKey="rowKey"
        table-layout-fixed
        :tooltip="true"
        :scroll="{ x: 1200 }"
      >
        <template #columns>
          <a-table-column
            v-for="item of sessionColumns"
            :key="item.key"
            align="left"
            :ellipsis="true"
            :tooltip="true"
            :width="item.width"
            :title="(item.title as string)"
            :data-index="(item.key as string)"
            :fixed="item.fixed"
          >
            <template v-if="item.key === 'state'" #cell="{ record }">
              <a-tag color="blue" v-if="record.state == 0">待兑换</a-tag>
              <a-tag v-if="record.state == 1">已兑换</a-tag>
              <a-tag color="red" v-if="record.state == 2">过期</a-tag>
            </template>
            <template v-else-if="item.key === 'useNo'" #cell="{ record }">
              <span v-if="record.useNo">{{ record.useNo }}</span>
              <span v-else>---</span>
            </template>
            <template v-else-if="item.key === 'useTime'" #cell="{ record }">
              <span v-if="record.useTime">{{ record.useTime }}</span>
              <span v-else>---</span>
            </template>
            <template v-else-if="item.key === 'active'" #cell="{ record }">
              <a-space :size="2">
                <a-button
                  v-permission="ordercouponrefund"
                  style="padding: 0px 4px"
                  type="text"
                  size="small"
                  @click="itemUse(record)"
                  >使用</a-button
                >
                <a-button
                  v-permission="couponInfoDelete"
                  @click="onDeleteItemA(record)"
                  style="padding: 0px 4px"
                  type="text"
                  size="small"
                  status="danger"
                  >移除</a-button
                >
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 优惠券使用 -->
    <a-modal
      v-model:visible="useVisible"
      @before-close="useCFn"
      title="使用单号"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form :auto-label-width="true" :model="useForm">
        <a-form-item field="passWord" label="使用单号">
          <a-input v-model="useForm.useNo" placeholder="请输入使用单号" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="useCFn">取消</a-button>
          <a-button type="primary" @click="useSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 转移卡板 -->
    <a-modal
      v-model:visible="transferVisible"
      @before-close="transferClose"
      title="转移卡板"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="transferRef" :auto-label-width="true" :model="transferForm">
        <a-form-item field="passWord" label="转移数据">
          <div class="radio-bcg" style="height: 68px">
            <a-checkbox v-model="transferForm.order">套餐订单</a-checkbox>
            <a-checkbox v-model="transferForm.balance">卡板余额</a-checkbox>
            <a-checkbox v-model="transferForm.user">所属客户</a-checkbox>
            <a-checkbox v-model="transferForm.realName">系统实名</a-checkbox>
            <a-checkbox v-model="transferForm.coupon">券包订单</a-checkbox>
            <a-checkbox v-model="transferForm.speedVip">会员订单</a-checkbox>
          </div>
        </a-form-item>

        <a-form-item
          field="card"
          asterisk-position="end"
          :rules="[{ required: true, message: '新卡卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          label="新卡卡号"
        >
          <a-input v-model="transferForm.card" placeholder="请输入新卡卡号" allow-clear />
        </a-form-item>
        <a-form-item field="remarks" label="转移备注">
          <a-input v-model="transferForm.remarks" placeholder="请输入转移备注" allow-clear />
        </a-form-item>
        <div> 卡板转移的一些注意事项 </div>
        <div class="radio-bcg" style="height: 68px; margin-top: 10px">
          1：转移的卡必须为新卡 <br />2：已失效的套餐订单不进行转移
        </div>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="transferClose">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="transferCon">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 清除数据 -->
    <a-modal
      v-model:visible="timeShow"
      @before-close="timeClose"
      title="清除数据"
      width="520px"
      :mask-closable="false"
      title-align="start"
    >
      <div style="border-radius: 5px; background: #f2f3f5">
        <div style="padding: 10px 15px; border-bottom: 1px solid #e5e6eb"> 清除数据注意事项 </div>
        <div style="padding: 10px 15px">
          <div>1：选择套餐订单清空时，卡上的天用量也会被删除</div>
          <div>2：选择余额订单清空时，卡上的余额明细，卡余额都会被清除</div>
        </div>
      </div>
      <div
        style="
          padding: 10px 15px;
          border-radius: 5px;
          background: #f2f3f5;
          margin-top: 10px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        "
      >
        <a-checkbox v-model="timeForm.pay">套餐时间</a-checkbox>
        <a-checkbox v-model="timeForm.balance">余额时间</a-checkbox>
        <a-checkbox v-model="timeForm.coupon">券包时间</a-checkbox>
        <a-checkbox v-model="timeForm.vip">会员时间</a-checkbox>
        <a-checkbox v-model="timeForm.cancellation">注销时间</a-checkbox>
        <a-checkbox v-model="timeForm.change">换卡时间</a-checkbox>
        <a-checkbox v-model="timeForm.transfer">转移时间</a-checkbox>
        <a-checkbox v-model="timeForm.expire">到期时间</a-checkbox>
        <a-checkbox v-model="timeForm.order">套餐订单</a-checkbox>
        <a-checkbox v-model="timeForm.bill">余额订单</a-checkbox>
      </div>
      <!-- <a-form ref="timeRef" :auto-label-width="true" :model="timeForm">
        <a-form-item field="passWord" label="清除类型">
          <div class="radio-bcg">
           
          </div>
        </a-form-item>
      </a-form> -->
      <template #footer>
        <div
          style="display: flex; width: 100%; justify-content: space-between; align-items: center"
        >
          <div>
            <span style="color: #3491fa" @click="allChange">全选</span>
            <span style="margin-left: 10px; color: #86909c" @click="returnChange">反选</span>
          </div>
          <a-space>
            <a-button @click="timeClose">取消</a-button>
            <a-button type="primary" @click="timeCon">确定</a-button>
          </a-space>
        </div>
      </template>
    </a-modal>
    <!-- 自动续费 -->
    <a-modal
      v-model:visible="automaticShow"
      @before-close="automaticCFn"
      title="自动续费"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="automaticRef" :auto-label-width="true" :model="automaticForm">
        <a-form-item
          field="close"
          label="续费状态"
          :rules="[{ required: true, message: '续费状态不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-radio-group class="radio-bcg" v-model="automaticForm.close">
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">开启</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">关闭</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="充值套餐"
          v-if="automaticForm.close == false"
          :content-flex="false"
          :merge-props="false"
        >
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item
                hide-asterisk
                field="setMealId"
                validate-trigger="input"
                :rules="[{ required: true, message: '请选择充值套餐' }]"
                asterisk-position="end"
                no-style
              >
                <a-select
                  v-model="automaticForm.setMealId"
                  placeholder="请选择充值套餐"
                  allow-clear
                >
                  <a-option v-for="item in mealList" :key="item.id" :value="item.id">{{
                    item.name
                  }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="automaticCFn">取消</a-button>
          <a-button type="primary" :loading="automaticLoad" @click="automaticSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 清除实名 -->
    <a-modal
      v-model:visible="clearRealNameShow"
      @before-close="clearRealNameShow = false"
      title="清除实名"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form :auto-label-width="true">
        <a-form-item label="实名状态">
          <div class="radio-bcg">
            官方实名：{{
              cardDetail.officialRealName == 0
                ? '已实名'
                : cardDetail.officialRealName == 1
                ? '未实名'
                : '未知'
            }}
            &nbsp;&nbsp;系统实名：{{ cardDetail.cardRealName ? '已实名' : '未实名' }}
          </div>
        </a-form-item>
        <a-form-item label="选择实名">
          <div class="radio-bcg">
            <a-checkbox v-model="officialRealName">官方实名</a-checkbox>
            <a-checkbox v-model="systemRealName">系统实名</a-checkbox>
          </div>
        </a-form-item>
      </a-form>
      <div
        v-if="error.length > 0"
        style="background-color: var(--color-fill-2); padding: 10px 20px"
      >
        <div v-for="(item, index) in error" :key="index">{{ item }}</div>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="clearRealNameShow = false">取消</a-button>
          <a-button type="primary" :loading="clearRealNameLoad" @click="subClearRealName"
            >确定</a-button
          >
        </a-space>
      </template>
    </a-modal>
    <!-- 卡板换卡 -->
    <a-modal
      v-model:visible="changeCardVisible"
      @before-close="changeCardCFn"
      title="卡板换卡"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="changeCardRef" :auto-label-width="true" :model="changeCardForm">
        <a-form-item
          field="changeGroupId"
          label="换卡分类"
          :rules="[{ required: true, message: '换卡分类不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-select v-model="changeCardForm.changeGroupId" placeholder="请选择换卡分类" allow-clear>
            <a-option v-for="item in changeCardMold" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="changeCardCFn">取消</a-button>
          <a-button type="primary" :loading="changeCardloading" @click="changeCardSub"
            >确定</a-button
          >
        </a-space>
      </template>
    </a-modal>
    <!--报文日志 -->
    <a-modal
      v-model:visible="rizhiVisible"
      title="报文日志"
      width="800px"
      :mask-closable="false"
      title-align="start"
    >
      <div>
        <a-table :columns="columns" :pagination="false" :data="massList">
          <template #columns>
            <a-table-column
              v-for="item of columns"
              :key="item.dataIndex"
              align="left"
              :width="item.width"
              :title="(item.title as string)"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.dataIndex === 'name'" #cell="{ record }">
                <span>{{ record.admin ? record.admin.userName : '- - -' }}</span>
              </template>
              <template v-if="item.dataIndex === 'type'" #cell="{ record }">
                <span>{{ record.type == 0 ? '手动提交' : '自动提交' }}</span>
              </template>
              <template v-if="item.dataIndex === 'timing'" #cell="{ record }">
                <span>{{ Math.floor((record.timing / 1000) * 100) / 100 }}秒</span>
              </template>
              <template v-if="item.dataIndex === 'time'" #cell="{ record }">
                <span>{{ record.time }}</span>
              </template>
              <template v-if="item.dataIndex === 'success'" #cell="{ record }">
                <a-tag color="red" v-if="record.success == false">失败</a-tag>
                <a-tag color="blue" v-else-if="record.success == true">成功</a-tag>
              </template>
              <template v-if="item.dataIndex === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="detailFny(record)"
                    >详情</a-button
                  >
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!--报文 -->
    <a-modal
      v-model:visible="messageVisibles"
      title="报文详情"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <div>
        <a-form ref="userForm" :auto-label-width="true" :model="messDetails">
          <a-form-item field="url" label="请求链接">
            <a-textarea
              class="nonecopy"
              v-model="messDetails.url"
              @click="useCommon.copy(messDetails.url)"
              readonly
            />
          </a-form-item>
          <a-form-item field="headers" v-if="messDetails.headers" label="请求头">
            <a-textarea
              v-model="messDetails.headers"
              readonly
              @click="useCommon.copy(messDetails.headers)"
            />
          </a-form-item>
          <a-form-item field="body" v-if="messDetails.body" label="请求参数">
            <a-textarea
              v-model="messDetails.body"
              readonly
              @click="useCommon.copy(messDetails.body)"
            />
          </a-form-item>
          <a-form-item field="result" label="上游报文">
            <a-textarea
              v-model="messDetails.result"
              readonly
              @click="useCommon.copy(messDetails.result)"
            /> </a-form-item
          ><a-form-item field="id" label="常见问题">
            <a-collapse :default-active-key="['1']">
              <a-collapse-item header="为什么会失败，具体是怎么回事要怎么解决？" key="1">
                <div>1：操作失败一般都是上游的问题</div>
                <div>2：怎么解决：联系上游，将报文发送给上游咨询解决方法</div>
                <div
                  >3：为什么会操作失败，比如系统给上游说了一句话，上游告诉系统说不
                  行，然后系统这边就无法正常处理操作</div
                >
                <div
                  >4：名词解释：请求链接为系统通过什么途径对上游说话；请求参数为系
                  统对上游说的话；上游报文为上游给系统的回话</div
                >
              </a-collapse-item>
            </a-collapse>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 订单成功 -->
    <a-modal
      v-model:visible="successv"
      title="订单提交"
      width="400px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form :model="detail" layout="vertical">
        <a-form-item field="value1" label="提交上游">
          <a-radio-group class="radio-bcg" v-model="up">
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">提交</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div> </div
                  ><div className="custom-radio-card-title">不提交</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
          <template #extra>
            <div
              >提交:将订单提交给上游，订单改为成功状态，不提交:
              订单不提交给上游，直接将订单改为成功状态</div
            >
          </template>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="successv = false">取消</a-button>
          <a-button type="primary" @click="successFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 套餐订单详情 -->
    <a-drawer
      :width="1000"
      v-model:visible="visibleDetail"
      :mask-closable="false"
      title-align="start"
      title="订单详情"
      :footer="false"
    >
      <div class="padding20">
        <div class="box">
          <div class="line"></div>
          <div class="text">基本信息 </div>
        </div>
      </div>
      <a-row class="padding20">
        <a-col :span="12">
          <div class="display-box">
            <img v-if="detail.payType === 0" src="@/assets/order/y.jpg" class="imgsa1" mode="" />
            <img v-if="detail.payType === 1" src="@/assets/order/zf.png" class="imgsa1" mode="" />
            <img v-if="detail.payType === 2" src="@/assets/order/w.png" class="imgsa1" mode="" />
            <img v-if="detail.payType === 3" src="@/assets/order/j.jpg" class="imgsa1" mode="" />
            <img v-if="detail.payType === 4" src="@/assets/order/p.jpg" class="imgsa1" mode="" />
            <img v-if="detail.payType === 5" src="@/assets/order/zs.jpg" class="imgsa1" mode="" />
            <div class="display-right">
              <div class="text-name">
                <span
                  style="
                    background-color: rgba(29, 33, 41, 0.1);
                    height: 20px;
                    display: flex;
                    align-items: center;
                  "
                  ><img
                    class="imgsa"
                    v-if="cardDetail.series.operator == 0"
                    style="margin-right: 0"
                    src="@/assets/yd.png"
                    alt="" />
                  <img
                    class="imgsa"
                    v-if="cardDetail.series.operator == 1"
                    style="margin-right: 0"
                    src="@/assets/lt.png"
                    alt="" />
                  <img
                    class="imgsa"
                    v-if="cardDetail.series.operator == 2"
                    style="margin-right: 0"
                    src="@/assets/dx.png"
                    alt="" />
                  <img
                    class="imgsa"
                    v-if="cardDetail.series.operator == 3"
                    style="margin-right: 0"
                    src="@/assets/gd.png"
                    alt=""
                /></span>
                <span style="margin-left: 5px">{{ cardDetail.card }}</span>
              </div>
              <div class="text">充值套餐：{{ detail.setMealName }}</div>
              <div class="text">充值时间：{{ detail.createTime }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="12">
          <div style="float: right">
            <div>
              <a-space style="float: right">
                <a-button class="width75px" size="small" @click="previousFn"> 上一单</a-button>
                <a-button class="width75px" size="small" @click="nextFn"> 下一单 </a-button>
                <a-button
                  class="width75px"
                  type="primary"
                  status="warning"
                  size="small"
                  @click="detailFns(detail)"
                  >退款</a-button
                >
                <a-button class="width75px" type="primary" size="small" @click="success(detail.id)"
                  >提交</a-button
                >
              </a-space>
            </div>
            <div class="white" style="margin-top: 14px; float: right">
              <a-space>
                <a-button size="small" class="width75px" @click="detailOrderFn(detail)"
                  >编辑订单</a-button
                >
                <a-button size="small" class="width75px" @click="success(detail.id)"
                  >成功订单</a-button
                >
                <a-button size="small" class="width75px" @click="fail(detail.id)"
                  >失败订单</a-button
                >
                <a-button size="small" class="width75px" @click="delOrder(detail)"
                  >删除订单</a-button
                >
              </a-space>
            </div>
          </div>
        </a-col>
      </a-row>
      <div
        style="
          margin-top: 20px;
          border-top: 1px solid #f2f3f5;
          border-bottom: 1px solid #f2f3f5;
          padding: 20px 0;
        "
      >
        <a-grid :cols="6" :colGap="12" :rowGap="16" class="grid-demo-grid padding20">
          <a-grid-item class="demo-item">
            <div class="text-name">套餐类型</div>
            <div class="text-info">
              <span v-if="detail.setMealType == 0">无限叠加</span>
              <span v-else-if="detail.setMealType == 1">基础套餐</span>
              <span v-else-if="detail.setMealType == 2">叠加包</span>
              <!-- <span v-else-if="detail.setMealType == 3">体验包</span> -->
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">订单时间</div>
            <div class="text-info">
              <a-tag color="blue" v-if="detail.effectiveState == 0">立即生效</a-tag>
              <a-tag color="blue" v-else-if="detail.effectiveState == 1">本月生效</a-tag>
              <a-tag color="green" v-if="detail.effectiveState == 2">次月生效</a-tag>
              <a-tag color="green" v-else-if="detail.effectiveState == 3">月底顺延</a-tag>
              <a-tag color="green" v-if="detail.effectiveState == 4">跨月顺延</a-tag>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">订单状态</div>
            <div class="text-info">
              <a-tag color="red" v-if="detail.state == 4">退款</a-tag>
              <a-tag color="red" v-else-if="detail.state == 3">失败</a-tag>
              <a-tag color="blue" v-else-if="detail.state == 2">成功</a-tag>
              <a-tag color="gold" v-else-if="detail.state == 1">进行</a-tag>
              <a-tag v-else-if="detail.state == 0">等待</a-tag>
              <a-tag color="red" v-else-if="detail.state == -1">删除</a-tag>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">生效状态</div>
            <div class="text-info">
              <a-tag color="red" v-if="detail.effectiveType == 2">已失效</a-tag>
              <a-tag color="blue" v-else-if="detail.effectiveType == 0">待生效</a-tag>
              <a-tag color="blue" v-else-if="detail.effectiveType == 1">已生效</a-tag>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">订单类型</div>
            <div class="text-info"
              ><a-tag color="blue" v-if="detail.number == 1">首充{{ detail.number }}</a-tag>
              <a-tag color="green" v-else>续充{{ detail.number }}</a-tag>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">套餐流量</div>
            <div class="text-info">
              <span v-if="!detail.flowVirtual && !detail.flowReal"> 无限</span>
              <span v-else-if="detail.flowVirtual || (detail.flowReal && detail.flowVirtual)">{{
                detail.flowVirtual >= 1024
                  ? Math.floor((detail.flowVirtual / 1024) * 100) / 100 + 'G'
                  : Math.floor(detail.flowVirtual * 100) / 100 + 'M'
              }}</span>
              <span v-else-if="detail.flowReal">{{
                detail.flowReal >= 1024
                  ? Math.floor((detail.flowReal / 1024) * 100) / 100 + 'G'
                  : Math.floor(detail.flowReal * 100) / 100 + 'M'
              }}</span>
            </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">总金额</div>
            <div class="text-info">{{ detail.amount }}元 </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">支付金额</div>
            <div class="text-info">{{ detail.paymentAmount }}元 </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">立减金额</div>
            <div class="text-info">{{ detail.randomReduction }}元 </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">订单成本</div>
            <div class="text-info">{{ detail.adminCost }}元 </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">订单返佣</div>
            <div class="text-info">{{ detail.rebate }}元 </div>
          </a-grid-item>
          <a-grid-item class="demo-item">
            <div class="text-name">订单利润</div>
            <div class="text-info">{{ detail.profit }}元 </div>
          </a-grid-item>
        </a-grid>
      </div>
      <div class="col-div">
        <div>
          <div class="box" style="margin-bottom: 3px">
            <div class="line"></div>
            <div class="text">订单信息 </div>
          </div>
        </div>

        <a-row>
          <a-col :span="12"> 所属客户：{{ detail.user ? detail.user.userName : '管理员' }} </a-col>
          <a-col :span="12">
            套餐周期：
            <span v-if="detail.setMealType == 2"> 跟随套餐 </span>
            <span v-else>{{ detail.validity }}{{ detail.validityType == 0 ? '天' : '月' }}</span>
          </a-col>
          <a-col :span="12"> 客户成本：{{ detail.userCost ? detail.userCost + '元' : '' }} </a-col>
          <a-col :span="12"> 优惠金额：{{ detail.discountAmount }}元</a-col>
          <a-col :span="12"> 客户IP：{{ detail.ip }} </a-col>
          <a-col :span="12"> 客户地址：{{ detail.ipAddress }} </a-col>
          <a-col :span="12"> 所属渠道：{{ cardDetail.series.channel.name }} </a-col>
          <a-col :span="12"> 所属系列：{{ cardDetail.series.name }} </a-col>
          <a-col :span="12"> 成功时间：{{ detail.successTime }} </a-col>
          <a-col :span="12"> 备注：{{ detail.remarks }} </a-col>
        </a-row>
        <div>
          <div class="box" style="margin-bottom: 3px">
            <div class="line"></div>
            <div class="text">支付信息 </div>
          </div>
        </div>
        <a-row>
          <a-col :span="12">
            支付名称：{{ detail.payTemplate ? detail.payTemplate.name : '' }}
          </a-col>
          <a-col :span="12">
            支付商户号：
            {{ detail.payTemplate ? detail.payTemplate.merchantNo : '' }}
          </a-col>
          <a-col :span="12"> 商户订单号：{{ detail.outTradeNo }} </a-col>
          <a-col :span="12"> 支付订单号：{{ detail.tradeNo }} </a-col>
        </a-row>
        <div>
          <div class="box" style="margin-bottom: 3px">
            <div class="line"></div>
            <div class="text">退款信息 </div>
          </div>
        </div>
        <a-row>
          <a-col :span="12">
            退款类型：<span v-if="detail.refundType == 0"> 手动退款</span>
            <span v-else-if="detail.refundType == 1"> 原路退回</span>
            <span v-else-if="detail.refundType == 2"> 余额退款</span>
          </a-col>
          <a-col :span="12">
            退款金额：
            {{ detail.refundAmount }}
          </a-col>
          <a-col :span="12"> 退款时间：{{ detail.refundTime }} </a-col>
          <a-col :span="12"> 退款备注：{{ detail.refundRemarks }} </a-col>
        </a-row>
      </div>
    </a-drawer>
    <!-- 充值会员 -->
    <a-modal
      v-model:visible="vipShow"
      @before-close="vipCFn"
      title="充值会员"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="automaticRef" :auto-label-width="true" :model="vipForms">
        <a-form-item label="极速会员" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item hide-asterisk field="setMealId" validate-trigger="input" no-style>
                <a-select v-model="vipForms.speedVipId" placeholder="请选择极速会员" allow-clear>
                  <a-option v-for="item in vipListPlan" :key="item.id" :value="item.id">{{
                    item.vipName
                  }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="vipCFn">取消</a-button>
          <a-button type="primary" :loading="vipLoad" @click="vipSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- WIFI设置 -->
    <a-modal
      v-model:visible="wifiVisible"
      title="WIFI设置"
      width="500px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form>
        <a-form-item field="wifiName" label="WIFI名称">
          <a-input v-model="wifiForm.wifiName" placeholder="请输入WIFI名称" allow-clear />
        </a-form-item>
        <a-form-item field="wifiPassword" label="WIFI密码">
          <a-input v-model="wifiForm.wifiPassword" placeholder="请输入WIFI密码" allow-clear>
            <template #suffix>
              <span @click="clickSjs" style="color: rgb(var(--primary-6)); cursor: pointer"
                >随机密码</span
              >
            </template>
          </a-input>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="wifiClose">取消</a-button>
          <a-button type="primary" @click="submitWifi">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>
<script lang="ts">
  export default {
    name: 'Single',
  }
</script>

<script setup lang="ts">
  import {
    recordDistributionAdminList,
    exportRecordDistributionAdminList,
    recordRecoveryAdminList,
    exportRecordRecoveryAdminList,
    assignmentList,
    recordtAssignmentList,
    exportRecordAssignmentList,
    submitlist,
    fails,
    successs,
  } from '@/api/url'
  import cardTable from '@/views/log/compoents/cardTable.vue'
  import useCommonStore from '@/store/modules/common'
  import {
    cardSingle,
    deleteorder,
    mealLists,
    orderpay,
    refresh,
    start,
    resetLinks,
    stop,
    balance,
    passWord,
    updateCancelLise,
    getCancelClass,
    parameterPostDisOrder,
    deleteBinding,
    postDisOrder,
    getOperationList,
    recoveryPostDisOrder,
    deletereal,
    cardRealClear,
    RefundS,
    dosage,
    update,
    updateTime,
    couponBy,
    recoveryAdminList,
    distributionAdminList,
    warehousingList,
    rechargeCardList,
    cardBalance,
    cardBalanceRefund,
    cardRealOrder,
    cardRealOrderrefund,
    changeOrderList,
    handlerChangeOrder,
    deleteChangeOrder,
    ordercoupon,
    ordercouponendTime,
    ordercouponrefund,
    speedOrderList,
    speedDetail,
    speedTui,
    updateFlowS,
    couponInfoUse,
    couponInfoDelete,
    couponDelete,
    couponInfoList,
    transferOne,
    delCancelDisorder,
    rebaterecovery,
    billCard,
    billName,
    updateChangeList,
    cancelChange,
  } from '@/api/url'
  import md5 from 'js-md5'
  import { get, formpost, post } from '@/api/http'
  import { onMounted, reactive, ref, watch } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { usePagination, useRowKey } from '@/hooks/table'
  import * as echarts from 'echarts'
  import router from '@/router'
  const change1024s = (item: any, value: any) => {
    if (value == 1) {
      detail.value.flowReal = item * 1024
    } else if (value == 3) {
      detail.value.flowVirtual = item * 1024
    }
  }
  //修改wifi隐藏
  function changeWifiHide(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要改变WIFI隐藏吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        post({
          url: '/app/admin/device/wifi/hide',
          data: () => {
            return {
              hide: cardDetail.value.wifiDevice.hide,
              id: cardDetail.value.wifiDevice.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            cardSeachFna()
          } else {
            Message.error(res.msg)
          }
        })
      },
      onCancel() {
        cardSeachFna()
      },
    })
  }
  //修改WIFI
  const wifiVisible = ref(false)

  const wifiForm = ref({
    id: 0,
    wifiName: '',
    wifiPassword: '',
  })

  function openWifi(val: any) {
    wifiForm.value.id = val.id
    wifiForm.value.wifiName = val.wifiName
    wifiForm.value.wifiPassword = val.wifiPassword
    wifiVisible.value = true
  }

  function submitWifi() {
    post({
      url: '/app/admin/device/wifi/update',
      data: {
        ...wifiForm.value,
      },
    })
      .then((res) => {
        Message.success(res.msg)
        cardSeachFna()
        wifiClose()
      })
      .catch(() => {
        tables.tableLoading = false
      })
  }

  function wifiClose() {
    wifiForm.value = {
      id: 0,
      wifiName: '',
      wifiPassword: '',
    }
    wifiVisible.value = false
  }

  function clickSjs() {
    let code = ''
    let characters = 'abcdefghijklmnopqrstuvwxyz'
    characters += '0123456789'
    for (let i = 0; i < 8; i++) {
      code += characters.charAt(Math.floor(Math.random() * characters.length))
    }
    wifiForm.value.wifiPassword = code //把code值赋给data中定义好的password
  }
  //刷新
  function RefreshFns(item: any, val?: any) {
    get({
      url: refresh,
      data: () => {
        return {
          id: item.id,
          type: val,
        }
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        cardSeachFna()
      }
    })
  }
  //复机
  function startFns(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要恢复此卡吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: start,
          data: () => {
            return {
              id: item.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Modal.warning({
              title: '操作报文',
              content: res.msg,
              cancelText: '取消',
              titleAlign: 'start',
              hideCancel: false,
              okText: '确定',
              onOk: () => {},
            })

            cardSeachFna()
          }
        })
      },
    })
  }
  //停机
  function stopFns(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要停用此卡吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: stop,
          data: () => {
            return {
              id: item.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Modal.warning({
              title: '操作报文',
              content: res.msg,
              cancelText: '取消',
              titleAlign: 'start',
              hideCancel: false,
              okText: '确定',
              onOk: () => {},
            })
            cardSeachFna()
          }
        })
      },
    })
  }

  function changeFns(val: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要切到此卡吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        post({
          url: '/app/admin/device/wifi/switching',
          data: () => {
            return {
              id: cardDetail.value.wifiDevice.id,
              slot: val,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            cardSeachFna()
          }
        })
      },
    })
  }
  //卡板列表
  const cardColumns = ref([
    {
      title: '设备卡槽',
      key: 'card',
      width: 220,
    },
    {
      title: 'IMEI',
      key: 'imei',
      width: 220,
    },
    {
      title: '卡槽状态',
      key: 'cardState1',
      width: 150,
    },
    {
      title: '官方实名',
      key: 'officialRealName',
      width: 150,
    },
    {
      title: '卡板状态',
      key: 'state',
      width: 150,
    },
    {
      title: '在线状态',
      key: 'time',
      width: 150,
    },
    {
      title: '上游已用',
      key: 'use',
      width: 150,
    },

    {
      title: '流量更新',
      key: 'flowRefreshTime',
      width: 220,
    },
    {
      title: '实名更新',
      key: 'realNameRefreshTime',
      width: 220,
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 220,
    },
  ])
  //充值极速会员
  const vipShow = ref(false)
  const vipListPlan: any = ref([])
  const vipForms: any = ref({
    speedVipId: '',
  })
  function openVip() {
    vipLoad.value = false
    if (cardDetail.value.id) {
      vipShow.value = true
      vipForms.value = {
        speedVipId: '',
        cardId: cardDetail.value.id,
        seriesId: cardDetail.value.seriesId,
      }
      get({
        url: '/app/speed/vip/admin/get',
        data: () => {
          return {
            seriesId: cardDetail.value.seriesId,
          }
        },
      }).then((res) => {
        if (res.code == 0) {
          vipListPlan.value = res.data
        }
      })
    } else {
      Message.error('请先搜索卡号')
    }
  }
  const vipLoad = ref(false)
  function vipCFn() {
    vipForms.value.speedVipId = ''
    vipShow.value = false
  }
  function vipSub() {
    vipLoad.value = true
    get({
      url: '/app/speed/vip/order/batch/pay',
      data: {
        ...vipForms.value,
      },
    })
      .then((res) => {
        if (res.code == 0) {
          vipLoad.value = false
          vipCFn()
          Message.success(res.msg)
          cardSeachFna()
        } else {
          vipLoad.value = false
        }
      })
      .catch(() => {
        vipLoad.value = false
      })
  }
  //订单详情
  const visibleDetail = ref()
  const detailFn = (val: any) => {
    val.obj = {
      totalTraffic: '',
      usedTraffic: '',
      remainingTraffic: '',
      remainingRatio: '',
    }
    detail.value = JSON.parse(JSON.stringify(val))
    visibleDetail.value = true
  }
  const tableIndex = ref(0)
  function handleRowClick(record: any) {
    // 获取行的下标
    tableIndex.value = dataList.value.findIndex((element: any) => element.id === record.id)
  }
  function previousFn() {
    tableIndex.value--
    if (tableIndex.value < 0) {
      tableIndex.value = dataList.value.length - 1
      detailFn(dataList.value[tableIndex.value])
    } else {
      detailFn(dataList.value[tableIndex.value])
    }
  }

  function nextFn() {
    tableIndex.value++
    if (tableIndex.value > dataList.value.length - 1) {
      tableIndex.value = 0
      detailFn(dataList.value[tableIndex.value])
    } else {
      detailFn(dataList.value[tableIndex.value])
    }
  }
  //提交上游弹窗
  const up = ref(1)
  const successv = ref(false)
  const visible = ref(false)
  const idss = ref(0)
  function success(val: any) {
    visibleDetail.value = false
    visible.value = false
    successv.value = true
    idss.value = val
  }
  function successFn() {
    Modal.warning({
      title: '操作确认',
      content: '确定要执行此操作吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: successs,
          data: {
            id: idss.value,
            submit: up.value,
          },
        }).then((res) => {
          if (res.code == 0) {
            successv.value = false
            Message.success(res.msg)
            cardSeachFna()
          }
        })
      },
    })
  }
  //订单失败
  const fail = (item: any) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要执行此操作吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: fails,
          data: {
            id: item,
          },
        }).then((res) => {
          if (res.code == 0) {
            visibleDetail.value = false
            Message.success(res.msg)
            cardSeachFna()
          }
        })
      },
    })
  }
  //报文日志
  const rizhiVisible = ref(false)
  const columns = [
    {
      title: '操作人',
      dataIndex: 'name',
    },
    {
      title: '请求方式',
      dataIndex: 'type',
    },
    {
      title: '请求耗时',
      dataIndex: 'timing',
    },
    {
      title: '请求状态',
      dataIndex: 'success',
    },
    {
      title: '请求时间',
      dataIndex: 'time',
      width: 190,
    },
    {
      title: '操作',
      dataIndex: 'actions',
    },
  ]
  const massList: any = ref([{ result: '' }])
  const messDetails: any = ref({
    headers: '',
    body: '',
  })
  const messageVisibles = ref(false)
  const detailFny = (val: any) => {
    messDetails.value = val
    messageVisibles.value = true
  }
  const massFn = (val: any, val1?: any) => {
    get({
      url: submitlist,
      data: () => {
        return {
          id: val,
        }
      },
    })
      .then((res) => {
        massList.value = res.data
        if (val1 !== 1) {
          rizhiVisible.value = true
        }
      })
      .catch(console.log)
    console.log(massList.value)
  }
  //删除官方实名
  function realNameFno() {
    Modal.warning({
      hideCancel: false,
      titleAlign: 'start',
      title: '确认删除',
      content: '确认清除官方实名？',
      onOk: () => {
        get({
          url: deletereal,
          data: () => {
            return {
              id: cardDetail.value.id,
            }
          },
        }).then((res) => {
          Message.success(res.msg)
          cardSeachFna()
        })
      },
      onCancel: () => {},
    })
  }
  //删除系统实名
  function realNameFns() {
    Modal.warning({
      hideCancel: false,
      titleAlign: 'start',
      title: '确认删除',
      content: '确认清除系统实名？',
      onOk: () => {
        get({
          url: cardRealClear,
          data: () => {
            return {
              cardId: cardDetail.value.id,
            }
          },
        }).then((res) => {
          Message.success(res.msg)
          cardSeachFna()
        })
      },
      onCancel: () => {},
    })
  }
  //卡板换卡
  const changeCardForm: any = reactive({
    cardMultiline: '',
    cancellationGroupId: '',
  })
  const changeCardRef = ref()
  const changeCardVisible = ref(false)
  const changeCardloading = ref(false)
  const changeCardMold: any = ref([])
  function changeCardCFn() {
    changeCardRef.value?.resetFields()
    changeCardVisible.value = false
    changeCardloading.value = false
  }

  const getChangeCardClas = () => {
    get({
      url: '/app/card/change/group/get/all',
    }).then((res: any) => {
      changeCardMold.value = res.data
    })
  }

  function changeCardCFns() {
    if (cardDetail.value.id) {
      getChangeCardClas()
      changeCardForm.cardMultiline = cardDetail.value.card
      changeCardVisible.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }

  function changeCardSub() {
    changeCardRef.value?.validate().then((error: any) => {
      if (!error) {
        changeCardloading.value = true
        formpost({
          url: updateChangeList + '?changeGroupId=' + changeCardForm.changeGroupId,
          data: () => {
            return {
              cardMultiline: changeCardForm.cardMultiline,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              changeCardloading.value = false
              cardSeachFna()
              changeCardCFn()
            }
          })
          .catch(() => {
            changeCardloading.value = false
          })
      }
    })
  }
  //余额明细
  const typeLists: any = ref([])
  const paginationBalances = usePagination(balanceRefresh)
  const balanceOrderLists: any = ref([])
  const balanceOrderForms: any = ref({
    cards: '', //       充值卡号
  })
  function getTypeList() {
    get({
      url: billName,
      data: () => {
        return {}
      },
    }).then((res) => {
      typeLists.value = res.data
    })
  }
  const tableColumns7: any = reactive({
    list: [
      {
        title: '交易前余额',
        key: 'addBalance',
        dataIndex: 'addBalance',
        checked: true,
        width: 120,
      },
      {
        title: '交易余额',
        key: 'balance',
        dataIndex: 'balance',
        checked: true,
        width: 120,
      },
      {
        title: '交易后余额',
        key: 'endBalance',
        dataIndex: 'endBalance',
        checked: true,
        width: 120,
      },
      {
        title: '类型',
        key: 'type',
        dataIndex: 'type',
        checked: true,
        width: 120,
      },
      {
        title: '交易备注',
        key: 'remarks',
        dataIndex: 'remarks',
        checked: true,
        width: 120,
      },
      {
        title: '状态',
        key: 'add',
        dataIndex: 'add',
        checked: true,
        width: 120,
      },
      {
        title: '交易时间',
        key: 'createTime',
        dataIndex: 'createTime',
        checked: true,
        width: 190,
      },
    ],
  })
  //余额明细列表
  function balanceRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    if (cardDetail.value.id) {
      tables.tableLoading = true
      if (value) {
        paginationBalances.page = value
      }
      balanceOrderForms.value.cards = cardNum.value
      formpost({
        url: billCard,
        data: {
          page: paginationBalances.page,
          size: paginationBalances.pageSize,
          ...balanceOrderForms.value,
        },
      })
        .then((res) => {
          tables.tableLoading = false
          balanceOrderLists.value = res.data.list
          paginationBalances.setTotalSize((res.data as any).totalSize)
        })
        .catch(() => {
          tables.tableLoading = false
        })
    } else {
      Message.error('请先搜索卡号')
      paginationVip.pageCount = 0
    }
  }
  //返佣明细
  const paginationRebate = usePagination(rebateRefresh)
  const rebateOrderList: any = ref([])
  const rebateOrderForm: any = ref({
    outTradeNo: '',
    userIds: '', //    客户ID
    channelIds: '', //  渠道ID
    seriesIds: '', //  系列ID
    setMealIds: '', //  套餐ID
    cards: '', //       充值卡号
    states: '', //     返佣状态 0等待返佣（订单状态为等待） 1成功 2回收 3回收失败
    addAmount: '', //   开始金额
    endAmount: '', //   结束金额
    addTime: '', //     开始时间
    endTime: '', //    结束金额
  })
  //收回返佣
  function rebateDel(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要收回此返佣吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: rebaterecovery,
          data: () => {
            return {
              orderId: item.orderId,
              userId: item.userId,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            rebateRefresh()
          }
        })
      },
    })
  }
  const tableColumns6: any = reactive({
    list: [
      {
        title: '客户账号',
        key: 'userName',
        dataIndex: 'userName',
        ellipsis: true,
        tooltip: true,
        checked: true,
        width: 130,
      },
      {
        title: '套餐名称',
        key: 'setMealName',
        dataIndex: 'setMealName',
        checked: true,
        width: 120,
      },

      {
        title: '返佣金额',
        key: 'amount',
        dataIndex: 'amount',
        checked: true,
        width: 120,
      },
      {
        title: '返佣状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 120,
      },
      {
        title: '返佣时间',
        key: 'addTime',
        dataIndex: 'addTime',
        checked: true,
        width: 190,
      },
      {
        title: '操作',
        key: 'action',
        dataIndex: 'action',
        checked: true,
        width: 70,
        fixed: 'right',
      },
    ],
  })
  //返佣明细列表
  function rebateRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    if (cardDetail.value.id) {
      tables.tableLoading = true
      if (value) {
        paginationRebate.page = value
      }
      rebateOrderForm.value.cards = cardNum.value
      formpost({
        url: '/app/order/rebate/get/list',
        data: {
          page: paginationRebate.page,
          size: paginationRebate.pageSize,
          ...rebateOrderForm.value,
        },
      })
        .then((res) => {
          tables.tableLoading = false
          rebateOrderList.value = res.data.list
          paginationRebate.setTotalSize((res.data as any).totalSize)
        })
        .catch(() => {
          tables.tableLoading = false
        })
    } else {
      Message.error('请先搜索卡号')
      paginationVip.pageCount = 0
    }
  }
  //清除实名
  const clearRealNameShow = ref(false)
  const officialRealName = ref(false)
  const clearRealNameLoad = ref(false)
  const systemRealName = ref(false)
  function openClearRealName() {
    if (cardDetail.value.id) {
      error.value = []
      clearRealNameLoad.value = false
      clearRealNameShow.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }
  const error: any = ref([])

  const handleError = (msg: any) => {
    error.value.push(msg)
  }

  const fetchOfficial = async () => {
    try {
      const response = await fetch(`${deletereal}?id=${cardDetail.value.id}`)
      const res = await response.json()
      error.value.push(`官方实名：${res.msg}`)
      return res
    } catch (error) {
      handleError(`官方实名：${error.message}`)
      throw error
    }
  }

  const fetchSystem = async () => {
    try {
      const response = await fetch(`${cardRealClear}?cardId=${cardDetail.value.id}`)
      const res = await response.json()
      error.value.push(`系统实名：${res.msg}`)
      return res
    } catch (error) {
      handleError(`系统实名：${error.message}`)
      throw error
    }
  }

  const handleBothNames = async () => {
    try {
      await fetchOfficial()
      await fetchSystem()
      await (clearRealNameLoad.value = false)
      cardSeachFna()
    } catch (error) {
      // 可以添加更具体的错误处理逻辑
    }
  }

  const handleOnlyOfficial = async () => {
    try {
      await fetchOfficial()
      await (clearRealNameLoad.value = false)
      cardSeachFna()
    } catch (error) {
      // 可以添加更具体的错误处理逻辑
    }
  }

  const handleOnlySystem = async () => {
    try {
      await fetchSystem()
      await (clearRealNameLoad.value = false)
      cardSeachFna()
    } catch (error) {
      // 可以添加更具体的错误处理逻辑
    }
  }
  function subClearRealName() {
    if (!officialRealName.value && !systemRealName.value) {
      Message.error('必须选择其中一项')
    } else {
      clearRealNameLoad.value = true
      error.value = []
      if (officialRealName.value && systemRealName.value) {
        handleBothNames()
      } else if (officialRealName.value && !systemRealName.value) {
        handleOnlyOfficial()
      } else if (!officialRealName.value && systemRealName.value) {
        handleOnlySystem()
      }
    }
  }

  //粘贴
  const paste = async () => {
    try {
      if (navigator.permissions && navigator.permissions.query) {
        const permission = await navigator.permissions.query({ name: 'clipboard-read' })
        if (permission.state === 'granted') {
          const clipboardText = await navigator.clipboard.readText()
          cardNum.value = clipboardText
          cardSeachFn()
        } else if (permission.state === 'prompt') {
          if (window.location.protocol == 'http:') {
            Message.error('网站需要是https域名才可以使用该功能')
          } else {
            Message.error('剪贴板权限未放行，请放行剪贴板权限后再试')
          }
          const result = await permission.request()
          if (result.state === 'granted') {
            const clipboardText = await navigator.clipboard.readText()
            cardNum.value = clipboardText
            cardSeachFn()
          } else {
            if (window.location.protocol == 'http:') {
              Message.error('网站需要是https域名才可以使用该功能')
            } else {
              Message.error('剪贴板权限未放行，请放行剪贴板权限后再试')
            }
          }
        } else {
          console.log(window.location.protocol)
          if (window.location.protocol == 'http:') {
            Message.error('网站需要是https域名才可以使用该功能')
          } else {
            Message.error('剪贴板权限未放行，请放行剪贴板权限后再试')
          }
        }
      } else {
        // 旧版浏览器的处理，使用 document.execCommand('paste')
        const el = document.createElement('textarea')
        document.body.appendChild(el)
        el.focus()
        document.execCommand('paste')
        cardNum.value = el.value
        document.body.removeChild(el)
        cardSeachFn()
      }
    } catch (err) {
      if (window.location.protocol == 'http:') {
        Message.error('网站需要是https域名才可以使用该功能')
      } else {
        Message.error('剪贴板权限未放行，请放行剪贴板权限后再试')
      }
    }
  }
  //自动续费
  const automaticShow = ref(false)
  const automaticRef = ref()
  const automaticLoad = ref(false)
  const automaticForm = ref({
    id: '',
    close: false,
    setMealId: '',
  })
  function automaticCFn() {
    automaticRef.value?.resetFields()
    automaticLoad.value = false
    automaticShow.value = false
  }

  function automaticSub() {
    automaticRef.value?.validate().then((error: any) => {
      if (!error) {
        automaticForm.value.id = cardDetail.value.id
        automaticLoad.value = true
        formpost({
          url: '/app/admin/card/renew',
          data: {
            ...automaticForm.value,
          },
        })
          .then((res) => {
            if (res.code == 0) {
              automaticLoad.value = false
              Message.success(res.msg)
              automaticCFn()
              cardSeachFna()
            }
          })
          .catch(() => {
            automaticLoad.value = false
          })
      }
    })
  }
  function openAutomatic() {
    if (cardDetail.value.id) {
      if (cardDetail.value.setMealId) {
        automaticForm.value.close = false
      } else {
        automaticForm.value.close = true
      }
      get({
        url: mealLists,
        data: () => {
          return {
            seriesIds: cardDetail.value.seriesId,
          }
        },
      }).then((res) => {
        if (res.code == 0) {
          mealList.value = res.data
        }
      })
      automaticShow.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }

  function userRoute() {
    router.push('/user/user?card=' + cardDetail.value.user.userName)
  }
  const topForm: any = ref({})
  const time = ref('')
  const cardRemarks = ref('')
  const useCommon = useCommonStore()
  // const detailList = ref(['1'])
  // const detailLists = ref(['1'])
  const cardNum = ref('')
  const refLoad = ref(false)
  const stopLoad = ref(false)
  const startLoad = ref(false)
  const chack = ref(true)
  const chack1 = ref(true)
  const chack2 = ref(true)
  const chack3 = ref(true)
  const chack4 = ref(true)
  const orderTimeShow = ref(false)
  const orderType = ref('0')
  const lishiForm = ref({
    addRealUsed: '',
    endRealUsed: '',
  })
  const cardDetail: any = ref({
    series: { channel: {} },
    stateName: {},
    cardRealName: {
      name: '',
    },
    wifiDevice: {
      deviceState: 0,
      rssi: 0,
      electricQuantity: 0,
      abnormalState: false,
      cards: [],
      equipmentNo: '',
      id: '',
      wifiDeviceChannel: {
        name: '',
      },
      wifiDeviceScheme: {
        name: '',
      },
      reportingTime: '',
      onlineTime: '',
      switchingTime: '',
      remarks: '',
      wifiBand: '',
      wifiName: '',
      wifiPassword: '',
      wifiState: 0,
      hide: false,
      connectionsNumber: 0,
    },
    balance: 0,
  })
  //清除时间
  const timeShow = ref(false)
  const timeForm = ref({
    id: '', //           卡板ID
    pay: false, //          充值
    balance: false, //      余额
    coupon: false, //       优惠卷
    vip: false, //          极速会员
    cancellation: false, // 注销
    change: false, //       换卡
    transfer: false, //     转移
    expire: false, //   到期时间
    order: false, //  所有订单
    bill: false, //  余额账单
  })
  function openTime() {
    if (cardDetail.value.id) {
      timeShow.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }

  function allChange() {
    for (let key in timeForm.value) {
      if (key !== 'id') {
        timeForm.value[key] = true
      }
    }
  }

  function returnChange() {
    for (let key in timeForm.value) {
      if (key !== 'id') {
        timeForm.value[key] = !timeForm.value[key]
      }
    }
  }

  function timeCon() {
    timeForm.value.id = cardDetail.value.id
    get({
      url: '/app/user/card/clear/time',
      data: () => {
        return {
          ...timeForm.value,
        }
      },
    }).then((res: any) => {
      if (res.code == 0) {
        Message.success(res.msg)
        timeClose()
        cardSeachFna()
      }
    })
  }

  function timeClose() {
    timeForm.value = {
      id: '', //           卡板ID
      pay: false, //          充值
      balance: false, //      余额
      coupon: false, //       优惠卷
      vip: false, //          极速会员
      cancellation: false, // 注销
      change: false, //       换卡
      transfer: false, //     转移
      expire: false, //   到期时间
      order: false, //  所有订单
      bill: false, //  余额账单
    }
    timeShow.value = false
  }

  const showTip = ref(false)
  const checkedValue = ref([1])
  const type = ref('0')
  const show = ref(true)
  const rowKey = useRowKey('id')
  const dataList: any = ref([])
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const flowVisible = ref(false)
  const flowRef = ref()
  const flowForm = ref({
    id: 1,
    type: 0,
    flow: '',
  })
  function openFlow(val: any) {
    flowForm.value.id = val
    flowVisible.value = true
  }
  function flowCFn() {
    flowRef.value?.resetFields()
    loadings.value = false
    flowVisible.value = false
  }
  //刷新在线状态
  function onlineFn() {
    get({
      url: '/app/card/online',
      data: () => {
        return {
          id: cardDetail.value.id,
        }
      },
    }).then((res: any) => {
      if (res.code == 0) {
        Message.success('刷新成功')
        cardSeachFna()
      }
    })
  }
  function flowSub() {
    flowRef.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        formpost({
          url: '/app/card/correct/flow',
          data: () => {
            return {
              id: flowForm.value.id,
              flow: flowForm.value.flow,
            }
          },
        })
          .then((res: any) => {
            if (res.code == 0) {
              Message.success('修改成功')
              loadings.value = false
              flowCFn()
              cardSeachFna()
            }
          })
          .catch(() => {
            loadings.value = false
          })
      }
    })
  }
  function change1024(item: any) {
    flowForm.value.flow = item * 1024
  }
  //移除换卡
  function delOneChange() {
    Modal.warning({
      title: '操作确认',
      content: '确定要移除此换卡吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '删除',
      onOk: () => {
        formpost({
          url: cancelChange,
          data: () => {
            return {
              cardMultiline: cardDetail.value.card,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success('移除成功')
              cardSeachFna()
            } else {
              Message.error('移除成功')
            }
          })
          .catch(console.log)
      },
    })
  }
  //移除注销
  function delOneClass() {
    Modal.warning({
      title: '操作确认',
      content: '确定要移除此卡板吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '删除',
      onOk: () => {
        formpost({
          url: delCancelDisorder,
          data: () => {
            return {
              cardMultiline: cardDetail.value.card,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success('移除成功')
              cardSeachFna()
            } else {
              Message.error('移除失败')
            }
          })
          .catch(console.log)
      },
    })
  }
  //卡板换卡
  const transferVisible = ref(false)
  const transferRef = ref()
  const transferForm = ref({
    id: '',
    card: '',
    remarks: '',
    order: false,
    balance: false,
    user: false,
    realName: false,
    coupon: false,
    speedVip: false,
  })
  function openTransfer() {
    if (cardDetail.value.id) {
      transferVisible.value = true
      transferForm.value.id = cardDetail.value.id
    } else {
      Message.error('请先搜索卡号')
    }
  }
  function transferClose() {
    loadings.value = false
    transferRef.value.resetFields()
    transferVisible.value = false
  }
  function transferCon() {
    if (
      transferForm.value.order ||
      transferForm.value.balance ||
      transferForm.value.user ||
      transferForm.value.realName ||
      transferForm.value.coupon ||
      transferForm.value.speedVip
    ) {
      transferRef.value?.validate().then((error: any) => {
        if (!error) {
          loadings.value = true
          formpost({
            url: transferOne,
            data: () => {
              return {
                ...transferForm.value,
              }
            },
          })
            .then((res: any) => {
              if (res.code == 0) {
                Message.success('修改成功')
                loadings.value = false
                transferClose()
                cardSeachFna()
              }
            })
            .catch(() => {
              loadings.value = false
            })
        }
      })
    } else {
      Message.error('必须选择一个')
    }
  }
  //套餐订单
  const tableColumns: any = reactive({
    list: [
      // {
      //   title: '流量',
      //   key: 'flow',
      //   dataIndex: 'flow',
      //   checked: true,
      //   width: 70,
      // },
      {
        title: '充值套餐',
        key: 'setMealName',
        dataIndex: 'setMealName',
        checked: true,
        width: 235,
      },
      {
        title: '流量详情',
        key: 'flow',
        dataIndex: 'flow',
        checked: true,
        width: 240,
      },
      {
        title: '套餐时间',
        key: 'time',
        dataIndex: 'time',
        checked: true,
        width: 150,
      },

      {
        title: '支付金额',
        key: 'paymentAmount',
        dataIndex: 'paymentAmount',
        checked: true,
        width: 90,
      },
      {
        title: '订单状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 90,
      },
      {
        title: '生效状态',
        key: 'effectiveType',
        dataIndex: 'effectiveType',
        checked: true,
        width: 90,
      },
      {
        title: '订单时间',
        key: 'effectiveState',
        dataIndex: 'effectiveState',
        checked: true,
        width: 140,
      },

      {
        title: '充值时间',
        key: 'createTime',
        dataIndex: 'createTime',
        checked: true,
        width: 190,
      },

      {
        title: '生效时间',
        key: 'effectiveTime',
        dataIndex: 'effectiveTime',
        checked: true,
        width: 190,
      },
      {
        title: '到期时间',
        key: 'expirationTime',
        dataIndex: 'expirationTime',
        checked: true,
        width: 190,
      },
      {
        title: '订单备注',
        key: 'remarks',
        dataIndex: 'remarks',
        checked: true,
        width: 100,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 200,
        align: 'center',
        checked: true,
      },
    ],
  })
  //余额订单
  const tableColumns1: any = reactive({
    list: [
      {
        title: '充值金额',
        key: 'payAmount',
        dataIndex: 'payAmount',
        checked: true,
        width: 100,
      },
      {
        title: '赠送金额',
        key: 'giveAmount',
        dataIndex: 'giveAmount',
        checked: true,
        width: 100,
      },
      {
        title: '到账金额',
        key: 'receivedAmount',
        dataIndex: 'receivedAmount',
        checked: true,
        width: 100,
      },
      {
        title: '支付金额',
        key: 'paymentAmount',
        dataIndex: 'paymentAmount',
        checked: true,
        width: 100,
      },
      {
        title: '订单状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 100,
      },
      {
        title: '订单类型',
        key: 'stateName',
        dataIndex: 'stateName',
        checked: true,
        width: 100,
      },
      {
        title: '充值时间',
        key: 'createTime',
        dataIndex: 'createTime',
        checked: true,
        width: 190,
      },
      {
        title: '退款备注',
        key: 'refundRemarks',
        dataIndex: 'refundRemarks',
        checked: true,
        width: 220,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 180,
        align: 'center',
        checked: true,
      },
    ],
  })
  const balanceRefundVisible = ref(false)
  const balanceOrderDetailVisible = ref(false)
  const balanceOrderDetail = ref({
    createTime: '2023-08-24 16:12:25',
    id: 1,
    outRefundNo: '20230824161227935011',
    outTradeNo: '20230824161208245823',
    payTemplate: { merchantType: 0, merchantNo: '2021004101656942' },
    payTemplateId: 16,
    paymentAmount: 0,
    receivedAmount: 0,
    refundAmount: 0,
    serviceCharge: 0,
    tradeNo: '2023082422001412911428476242',
    type: 0,
    user: { userName: 'user' },
    userId: 41,
    series: { name: '执行程序', channel: { name: '迎梦云-老郭' } },
  })
  const balanceOrderList: any = ref([])
  //余额订单搜索项
  const balanceOrderForm: any = ref({
    outTradeNo: '',
    tradeNo: '',
    ip: '',
    merchantNo: '',
    card: '',
    userId: '',
    type: '',
    addTime: '',
    endTime: '',
    refund: '',
    addRefundTime: '',
    endRefundTime: '',
    firstCharge: '',
    payTemplateId: '',
    addAmount: '', // 开始支付金额
    endAmount: '', // 结束支付金额
    addGiveAmount: '',
    endGiveAmount: '',
    addNumber: '',
    endNumber: '',
    addPaymentAmount: '',
    endPaymentAmount: '',
    series: [],
    channels: [],
    operator: '',
  })
  //余额订单详情
  function detailBalanceFn(val: any) {
    balanceOrderDetail.value = JSON.parse(JSON.stringify(val))
    balanceOrderDetailVisible.value = true
  }
  //余额订单退款详情
  function detailBalanceFns(val: any) {
    balanceOrderDetail.value = JSON.parse(JSON.stringify(val))
    if (balanceOrderDetail.value.type == 0) {
      balanceOrderDetail.value.typeName = '支付宝'
    } else {
      balanceOrderDetail.value.typeName = '微信'
    }
    get({
      url: cardBalance,
      data: () => {
        return {
          id: balanceOrderDetail.value.cardId,
        }
      },
    })
      .then((res) => {
        balanceOrderDetail.value.balance = res.data
        balanceOrderDetail.value.refundAmount = balanceOrderDetail.value.paymentAmount
        balanceOrderDetail.value.deductionAmount = balanceOrderDetail.value.receivedAmount
        balanceRefundVisible.value = true
      })
      .catch(console.log)
  }
  //余额订单退款
  function refundBalanceFn(val: any) {
    Modal.warning({
      hideCancel: false,
      titleAlign: 'start',
      title: '确认退款',
      content: '确认执行此操作？',
      onOk: () => {
        formpost({
          url: cardBalanceRefund,
          data: () => {
            return {
              id: balanceOrderDetail.value.id,
              refundAmount: balanceOrderDetail.value.refundAmount,
              deductionAmount: balanceOrderDetail.value.deductionAmount,
              refundRemarks: balanceOrderDetail.value.refundRemarks,
              refundType: val,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              balanceRefundVisible.value = false
              balanceOrderFn()
            }
          })
          .catch(console.log)
      },
      onCancel: () => {},
    })
  }
  //余额订单分页
  const paginationBalance = usePagination(balanceOrderFn)
  //获取余额订单
  function balanceOrderFn(value?: any) {
    if (cardDetail.value.id) {
      if (value) {
        paginationBalance.page = value
      }
      balanceOrderForm.value.card = cardNum.value
      tables.tableLoading = true
      formpost({
        url: rechargeCardList,
        data: () => {
          return {
            page: paginationBalance.page,
            size: paginationBalance.pageSize,
            ...balanceOrderForm.value,
          }
        },
      })
        .then((res) => {
          tables.tableLoading = false
          balanceOrderList.value = res.data.list
          pagination.setTotalSize((res.data as any).totalSize)
        })
        .catch(() => {
          tables.tableLoading = false
        })
    } else {
      Message.error('请先搜索卡号')
      paginationBalance.pageCount = 0
    }
  }

  //实名订单
  const tableColumns2: any = reactive({
    list: [
      {
        title: '支付金额(元)',
        key: 'paymentAmount',
        dataIndex: 'paymentAmount',
        checked: true,
        width: 100,
      },
      {
        title: '订单状态',
        key: 'refundTime',
        dataIndex: 'refundTime',
        checked: true,
        width: 100,
      },
      {
        title: '订单类型',
        key: 'stateName',
        dataIndex: 'stateName',
        checked: true,
        width: 100,
      },
      {
        title: '支付时间',
        key: 'createTime',
        dataIndex: 'createTime',
        checked: true,
        width: 190,
      },
      {
        title: '退款备注',
        key: 'refundRemarks',
        dataIndex: 'refundRemarks',
        checked: true,
        width: 220,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 120,
        align: 'center',
        checked: true,
      },
    ],
  })

  const orderRealList: any = ref([])
  //实名订单搜索项
  const orderRealForm = ref({
    card: '',
    outTradeNo: '',
    tradeNo: '',
    type: '',
    addTime: '',
    endTime: '',
    refund: '',
    addRefundTime: '',
    endRefundTime: '',
    firstCharge: '',
    payTemplateId: '',
  })
  //实名订单分页
  const paginationReal = usePagination(balanceRealFn)
  const realRefundVisible = ref(false)
  const realOrderDetailVisible = ref(false)
  const realOrderDetail: any = ref({
    createTime: '2023-08-24 16:12:25',
    id: 1,
    outRefundNo: '20230824161227935011',
    outTradeNo: '20230824161208245823',
    payTemplate: { merchantType: 0, merchantNo: '2021004101656942' },
    payTemplateId: 16,
    paymentAmount: 0,
    receivedAmount: 0,
    refundAmount: 0,
    serviceCharge: 0,
    tradeNo: '2023082422001412911428476242',
    type: 0,
    user: { userName: 'user' },
    userId: 41,
    series: { name: '执行程序', channel: { name: '迎梦云-老郭' } },
  })
  //实名订单详情
  function detailRealFn(val: any) {
    realOrderDetail.value = JSON.parse(JSON.stringify(val))
    realOrderDetailVisible.value = true
  }
  //实名订单退款详情
  function detailRealRefundFn(val: any) {
    realOrderDetail.value = JSON.parse(JSON.stringify(val))
    if (realOrderDetail.value.type == 0) {
      realOrderDetail.value.typeName = '支付宝'
    } else {
      realOrderDetail.value.typeName = '微信'
    }
    realRefundVisible.value = true
  }
  //实名订单退款
  function refundRealFn(val: any) {
    Modal.warning({
      hideCancel: false,
      titleAlign: 'start',
      title: '确认退款',
      content: '确认执行此操作？',
      onOk: () => {
        formpost({
          url: cardRealOrderrefund,
          data: () => {
            return {
              id: realOrderDetail.value.id,
              refundAmount: realOrderDetail.value.refundAmount,
              refundRemarks: realOrderDetail.value.refundRemarks,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              realRefundVisible.value = false
              balanceRealFn()
            }
          })
          .catch(console.log)
      },
      onCancel: () => {},
    })
  }
  //获取实名订单
  function balanceRealFn(value?: any) {
    if (cardDetail.value.id) {
      if (value) {
        paginationReal.page = value
      }
      orderRealForm.value.card = cardNum.value
      tables.tableLoading = true
      formpost({
        url: cardRealOrder,
        data: () => {
          return {
            page: paginationReal.page,
            size: paginationReal.pageSize,
            ...orderRealForm.value,
          }
        },
      })
        .then((res) => {
          tables.tableLoading = false
          orderRealList.value = res.data.list
          pagination.setTotalSize((res.data as any).totalSize)
        })
        .catch(() => {
          tables.tableLoading = false
        })
    } else {
      Message.error('请先搜索卡号')
      paginationReal.pageCount = 0
    }
  }

  //邮费订单
  const tableColumns3: any = reactive({
    list: [
      {
        title: '申请时间',
        key: 'applyTime',
        dataIndex: 'applyTime',
        checked: true,
        width: 190,
      },
      {
        title: '换卡卡种',
        key: 'cardSpecies',
        dataIndex: 'cardSpecies',
        checked: true,
        width: 100,
      },
      {
        title: '支付金额',
        key: 'paymentAmount',
        dataIndex: 'paymentAmount',
        checked: true,
        width: 100,
      },

      {
        title: '换卡状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 100,
      },
      {
        title: '新卡号',
        key: 'newCard',
        dataIndex: 'newCard',
        checked: true,
        width: 280,
      },
      {
        title: '收货姓名',
        key: 'name',
        dataIndex: 'name',
        checked: true,
        width: 100,
      },
      {
        title: '手机号',
        key: 'phone',
        dataIndex: 'phone',
        checked: true,
        width: 100,
      },

      {
        title: '收货地址',
        key: 'address',
        dataIndex: 'address',
        checked: true,
        width: 100,
      },
      {
        title: '快递单号',
        key: 'tradeNo',
        dataIndex: 'tradeNo',
        checked: true,
        width: 100,
      },
      {
        title: '换卡备注',
        key: 'remarks',
        dataIndex: 'remarks',
        checked: true,
        width: 100,
      },
      {
        title: '处理时间',
        key: 'handlerTime',
        dataIndex: 'handlerTime',
        checked: true,
        width: 190,
      },
      {
        title: '处理备注',
        key: 'handlerRemarks',
        dataIndex: 'handlerRemarks',
        checked: true,
        width: 100,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 120,
        align: 'center',
        checked: true,
      },
    ],
  })
  //实名订单搜索项
  const orderChangeForm = ref({
    type: '',
    outTradeNo: '', //       商户订单号
    tradeNo: '', //          支付订单号
    logisticNumber: '', //    快递单号
    srcCard: '', //         老卡号
    newCard: '', //         新卡号
    name: '', //           收货人姓名
    phone: '', //           收货人手机号
    state: '', //          订单状态 0等待 1正在 2成功 3驳回 4退款 请参考 {@link CardChangeOrderStateConstants#getState()}
    ip: '', //           ip
    srcUserId: '', //       原用户ID
    newUserId: '', //       新用户ID
    srcChannelId: '', //     原渠道ID
    newChannelId: '', //     新渠道ID
    srcSeriesId: '', //     原系列ID
    newSeriesId: '', //     新系列ID
    addPaymentAmount: '', //  开始订单金额
    endPaymentAmount: '', //  结束订单金额
    addApplyTime: '', //    开始申请订单时间
    endApplyTime: '', //     结束申请订单时间
    addHandlerTime: '', //    开始处理时间
    endHandlerTime: '', //   结束订单时间
    payTemplateId: '',
  })
  //邮费订单分页
  const paginationChange = usePagination(changeOrderdoRefresh)
  const stateVisible = ref(false)
  const orderChangeList: any = ref([])
  const stateFrom = ref({
    id: 0,
    state: 2,
    card: '',
    logisticNumber: '',
    handlerRemarks: '',
    refundType: '',
    refundAmount: '',
  })
  const stateRef = ref()
  const openState = (val: any) => {
    stateFrom.value.refundAmount = val.paymentAmount
    stateFrom.value.id = val.id
    stateVisible.value = true
  }
  const closeState = () => {
    stateRef.value.resetFields()
    stateVisible.value = false
  }
  const updateState = () => {
    stateRef.value.validate((error: any) => {
      if (!error) {
        formpost({
          url: handlerChangeOrder,
          data: () => {
            return {
              ...stateFrom.value,
            }
          },
        })
          .then((res) => {
            Message.success(res.msg)
            closeState()
            changeOrderdoRefresh()
          })
          .catch(console.log)
      }
    })
  }
  const deleteFn = (val: any) => {
    Modal.warning({
      hideCancel: false,
      titleAlign: 'start',
      title: '确认删除',
      content: '确认执行此操作？',
      onOk: () => {
        get({
          url: deleteChangeOrder,
          data: () => {
            return {
              id: val.id,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              changeOrderdoRefresh()
            }
          })
          .catch(console.log)
      },
      onCancel: () => {},
    })
  }
  const remarkV = ref(false)
  const remarkRef = ref()
  const couponList = ref([{ seriesCouponList: [] }])
  const couponForm: any = ref({})
  //邮费订单列表
  function changeOrderdoRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    if (cardDetail.value.id) {
      tables.tableLoading = true
      if (value) {
        paginationChange.page = value
      }
      orderChangeForm.value.srcCard = cardNum.value
      get({
        url: changeOrderList,
        data: {
          page: paginationChange.page,
          size: paginationChange.pageSize,
          ...orderChangeForm.value,
        },
      })
        .then((res) => {
          tables.tableLoading = false
          orderChangeList.value = res.data.list
          paginationChange.setTotalSize((res.data as any).totalSize)
        })
        .catch(() => {
          tables.tableLoading = false
        })
    } else {
      Message.error('请先搜索卡号')
      paginationChange.pageCount = 0
    }
  }
  //券包订单
  const tableColumns4: any = reactive({
    list: [
      {
        title: '券包名称',
        key: 'couponName',
        dataIndex: 'couponName',
        checked: true,
        width: 150,
      },
      {
        title: '支付金额',
        key: 'paymentAmount',
        dataIndex: 'paymentAmount',
        checked: true,
        width: 100,
      },

      {
        title: '券包数量',
        key: 'couponCount',
        dataIndex: 'couponCount',
        checked: true,
        width: 100,
      },
      {
        title: '券包金额',
        key: 'couponAmount',
        dataIndex: 'couponAmount',
        checked: true,
        width: 100,
      },
      {
        title: '订单状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 100,
      },
      {
        title: '充值时间',
        key: 'addTime',
        dataIndex: 'addTime',
        checked: true,
        width: 190,
      },
      {
        title: '过期时间',
        key: 'endTime',
        dataIndex: 'endTime',
        checked: true,
        width: 190,
      },
      {
        title: '首次使用',
        key: 'addUseTime',
        dataIndex: 'addUseTime',
        checked: true,
        width: 190,
      },
      {
        title: '最近使用',
        key: 'endUseTime',
        dataIndex: 'endUseTime',
        checked: true,
        width: 190,
      },
      {
        title: '退款时间',
        key: 'refundTime',
        dataIndex: 'refundTime',
        checked: true,
        width: 190,
      },
      {
        title: '退款备注',
        key: 'refundRemarks',
        dataIndex: 'refundRemarks',
        checked: true,
        width: 220,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 190,
        align: 'center',
        checked: true,
      },
    ],
  })
  const couponOrderForm = ref({
    card: '', //            卡号
    outTradeNo: '', //        订单号
    userIds: [], //         用户
    channelIds: [], //         渠道
    seriesIds: [], //         系列
    operators: [], //         运营商
    payTypes: [], //          支付类型
    state: '', //           订单状态
    isFirst: '', //            首充
    adminCollection: 0, //    直属
    addPayTime: '', //        开始充值时间
    endPayTime: '', //         结束充值时间
    addOverTime: '', //       开始过期时间
    endOverTime: '', //        结束过期时间
    addUseTime: '', //         开始使用时间
    endUseTime: '', //         结束使用时间
    addPayBalance: '', //      开始充值余额
    endPayBalance: '', //      结束充值余额
    addCouponPrice: '', //     开始优惠金额
    endCouponPrice: '', //     结束优惠金额
    addCouponCount: '', //     开始优惠券数量
    endCouponCount: '', //     结束优惠券数量
    addCounts: '',
    endCounts: '',
  })
  const couponOrderList = ref([])
  const paginationCoupon = usePagination(couponOrderdoRefresh)
  const detailCoupon = ref({
    user: {
      userName: '',
    },
  })
  const visibleCoupon = ref(false)
  const stateVisiblesa = ref(false)
  function closeStateCoupon() {
    stateVisible.value = false
  }
  const sessionList = ref([])
  const visibles1 = ref(false)
  const sessionColumns = [
    {
      width: 80,
      title: '订单ID',
      key: 'id',
      dataIndex: 'id',
    },
    {
      width: 80,
      title: '金额',
      key: 'couponPrice',
      dataIndex: 'couponPrice',
    },
    {
      width: 120,
      key: 'useNo',
      title: '使用单号',
      dataIndex: 'useNo',
    },
    {
      width: 80,
      key: 'state',
      title: '订单状态',
      dataIndex: 'state',
    },
    {
      width: 190,
      key: 'useTime',
      title: '使用时间',
      dataIndex: 'useTime',
    },
    {
      width: 190,
      key: 'addTime',
      title: '生效时间',
      dataIndex: 'addTime',
    },
    {
      width: 190,
      key: 'endTime',
      title: '到期时间',
      dataIndex: 'endTime',
    },
    {
      width: 110,
      key: 'active',
      title: '操作',
      dataIndex: 'active',
      fixed: 'right',
    },
  ]
  const details1 = (val: any) => {
    detailCoupon.value = JSON.parse(JSON.stringify(val))
    detailListaa()
    visibles1.value = true
  }
  //优惠券使用
  const useVisible = ref(false)
  const useForm = ref({
    id: '',
    useNo: '',
  })
  function useCFn() {
    useForm.value.useNo = ''
    useForm.value.id = ''
    useVisible.value = false
  }
  function detailListaa() {
    get({
      url: couponInfoList,
      data: {
        orderId: detailCoupon.value.id,
      },
    })
      .then((res) => {
        sessionList.value = res.data
      })
      .catch(console.log)
  }
  function useSub() {
    get({
      url: couponInfoUse,
      data: {
        id: useForm.value.id,
        useNo: useForm.value.useNo,
      },
    })
      .then((res) => {
        Message.success(res.msg)
        useCFn()
        detailListaa()
      })
      .catch(() => {})
  }
  const onDeleteItem = (item: any) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要删除此优惠券订单？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        get({
          url: couponDelete,
          data: {
            id: item.id,
          },
        })
          .then((res) => {
            Message.success(res.msg)
            couponOrderdoRefresh()
          })
          .catch(() => {})
      },
    })
  }
  const onDeleteItemA = (item: any) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要移除此优惠券？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        get({
          url: couponInfoDelete,
          data: {
            id: item.id,
          },
        })
          .then((res) => {
            Message.success(res.msg)
            detailListaa()
          })
          .catch(() => {})
      },
    })
  }
  const itemUse = (item: any) => {
    useForm.value.id = item.id
    useVisible.value = true
  }
  //券包退款
  const refundCouponFn = (val: any) => {
    Modal.warning({
      hideCancel: false,
      titleAlign: 'start',
      title: '确认退款',
      content: '确认执行此操作？',
      onOk: () => {
        formpost({
          url: ordercouponrefund,
          data: () => {
            return {
              id: detailCoupon.value.id,
              refundAmount: detailCoupon.value.refundAmount,
              refundRemarks: detailCoupon.value.refundRemarks,
              refundType: val,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              closeStateCoupon()
              couponOrderdoRefresh()
            }
          })
          .catch(console.log)
      },
      onCancel: () => {},
    })
  }
  //券包退款
  const openCouponState = (val: any) => {
    detailCoupon.value = JSON.parse(JSON.stringify(val))
    if (detailCoupon.value.type == 0) {
      detailCoupon.value.typeName = '支付宝'
    } else if (detailCoupon.value.type == 1) {
      detailCoupon.value.typeName = '微信'
    } else if (detailCoupon.value.type == 2) {
      detailCoupon.value.typeName = '批量'
    }
    detailCoupon.value.balance = ''
    detailCoupon.value.refundAmount = ''
    detailCoupon.value.deductionAmount = ''
    detailCoupon.value.refundRemarks = ''
    stateVisiblesa.value = true
  }
  //券包详情
  function detailCouponFn(val: any) {
    detailCoupon.value = JSON.parse(JSON.stringify(val))
    changeTraceEndas()
    visibleCoupon.value = true
  }
  let endTime = {}
  //跟踪API开始时间限制结束时间
  function changeTraceEndas() {
    console.log(detail.value.addTime)
    if (detailCoupon.value.addTime !== null) {
      //当前值为空 也会进行判断 所以条件最好不要非空验证
      endTime = {
        disabledDate: (time: any) => {
          return time.getTime() < new Date(detailCoupon.value.addTime).getTime() //小于开始时间的不选
        },
      }
      console.log(endTime)
    } else {
      endTime = {}
    }
  }
  function changeEndTime() {
    get({
      url: ordercouponendTime,
      data: {
        id: detailCoupon.value.id,
        endTime: detailCoupon.value.endTime,
      },
    })
      .then((res) => {
        Message.success(res.msg)
        doRefresh()
      })
      .catch(console.log)
  }
  //券包订单列表
  function couponOrderdoRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    if (cardDetail.value.id) {
      tables.tableLoading = true
      if (value) {
        paginationCoupon.page = value
      }
      couponOrderForm.value.card = cardNum.value
      formpost({
        url: ordercoupon,
        data: {
          page: paginationCoupon.page,
          size: paginationCoupon.pageSize,
          ...couponOrderForm.value,
        },
      })
        .then((res) => {
          res.data.list.forEach((item: any) => {
            if (item.seriesCouponOrderInfoList) {
              item.num = 0
              item.nums = 0
              item.seriesCouponOrderInfoList.forEach((items: any) => {
                if (items.state == 0) {
                  item.num++
                } else {
                  item.nums++
                }
              })
            }
          })
          tables.tableLoading = false
          couponOrderList.value = res.data.list
          paginationCoupon.setTotalSize((res.data as any).totalSize)
        })
        .catch(() => {
          tables.tableLoading = false
        })
    } else {
      Message.error('请先搜索卡号')
      paginationCoupon.pageCount = 0
    }
  }

  //会员订单
  const tableColumns5: any = reactive({
    list: [
      {
        title: '会员名称',
        key: 'vipName',
        dataIndex: 'vipName',
        checked: true,
        width: 100,
      },
      {
        title: '充值金额',
        key: 'paymentAmount',
        dataIndex: 'paymentAmount',
        checked: true,
        width: 100,
      },
      {
        title: '会员时间',
        key: 'couponCount',
        dataIndex: 'couponCount',
        checked: true,
        width: 100,
      },
      {
        title: '订单状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 100,
      },
      {
        title: '充值时间',
        key: 'payTime',
        dataIndex: 'payTime',
        checked: true,
        width: 190,
      },
      {
        title: '开始时间',
        key: 'addTime',
        dataIndex: 'addTime',
        checked: true,
        width: 190,
      },
      {
        title: '过期时间',
        key: 'endTime',
        dataIndex: 'endTime',
        checked: true,
        width: 190,
      },
      {
        title: '退款时间',
        key: 'refundTime',
        dataIndex: 'refundTime',
        checked: true,
        width: 190,
      },
      {
        title: '退款备注',
        key: 'refundRemarks',
        dataIndex: 'refundRemarks',
        checked: true,
        width: 220,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 150,
        align: 'center',
        checked: true,
      },
    ],
  })
  const stateVisiblekl = ref(false)
  const vipOrderList = ref([])
  const vipForm: any = ref({})
  const vipOrderForm = ref({
    orderNumber: '', //    订单号
    card: '', //           卡号
    isZhiShu: 0, //      true直属 false所有
    userIdList: '', //     用户ID
    channelIdList: '', //  渠道ID
    seriesIdList: '', //   系列ID
    operatorIdList: '', // 运营商ID
    payTypeIdList: '', //  支付类型ID
    state: '', //          订单状态
    addCounts: '',
    endCounts: '',
    addPayTime: '', //     开始支付时间
    endPayTime: '', //     结束支付时间
    addEndTime: '', //     开始到期时间
    endEndTime: '', //     结束到期时间
    addPayAmount: '', //   开始支付金额
    endPayAmount: '', //   结束支付金额
  })
  const paginationVip = usePagination(vipOrderdoRefresh)
  function openVipState(val: any) {
    get({
      url: speedDetail,
      data: {
        id: val.id,
      },
    })
      .then((res) => {
        vipForm.value = res.data
        if (vipForm.value.type == 0) {
          vipForm.value.typeName = '余额'
        } else if (vipForm.value.type == 1) {
          vipForm.value.typeName = '支付宝'
        } else if (vipForm.value.type == 1) {
          vipForm.value.typeName = '微信'
        }
        vipForm.value.balance = ''
        vipForm.value.refundAmount = ''
        vipForm.value.deductionAmount = ''
        vipForm.value.refundRemarks = ''
        stateVisiblekl.value = true
      })
      .catch(() => {})
  }
  function refundVipFn(val: any) {
    Modal.warning({
      hideCancel: false,
      titleAlign: 'start',
      title: '确认退款',
      content: '确认执行此操作？',
      onOk: () => {
        formpost({
          url: speedTui,
          data: () => {
            return {
              id: vipForm.value.id,
              refundAmount: vipForm.value.refundAmount,
              refundRemarks: vipForm.value.refundRemarks,
              refundType: val,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              if (vipForm.value.type == 0 && val == 1) {
                formpost({
                  url: '/app/speed/vip/order/balance/refund',
                  data: () => {
                    return {
                      speedVipOrderId: detail.value.id,
                      refundAmount: detail.value.refundAmount,
                    }
                  },
                })
                  .then((res) => {})
                  .catch(console.log)
              }
              Message.success(res.msg)
              stateVisiblekl.value = false
              vipOrderdoRefresh()
            }
          })
          .catch(console.log)
      },
      onCancel: () => {},
    })
  }
  //会员订单列表
  function vipOrderdoRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    if (cardDetail.value.id) {
      tables.tableLoading = true
      if (value) {
        paginationVip.page = value
      }
      vipOrderForm.value.card = cardNum.value
      formpost({
        url: speedOrderList,
        data: {
          page: paginationVip.page,
          size: paginationVip.pageSize,
          ...vipOrderForm.value,
        },
      })
        .then((res) => {
          tables.tableLoading = false
          vipOrderList.value = res.data.list
          paginationVip.setTotalSize((res.data as any).totalSize)
        })
        .catch(() => {
          tables.tableLoading = false
        })
    } else {
      Message.error('请先搜索卡号')
      paginationVip.pageCount = 0
    }
  }

  function openRemark() {
    if (cardDetail.value.id) {
      remarkV.value = true
      couponForm.value = {
        couponId: '',
        cardId: cardDetail.value.id,
        seriesId: cardDetail.value.seriesId,
      }
      get({
        url: couponBy,
        data: () => {
          return {
            seriesId: cardDetail.value.seriesId,
          }
        },
      }).then((res) => {
        if (res.code == 0) {
          couponList.value = res.data
        }
      })
    } else {
      Message.error('请先搜索卡号')
    }
  }

  //修改时间弹窗
  function detailOrderFn(val: any) {
    visibleDetail.value = false
    detail.value = JSON.parse(JSON.stringify(val))
    orderTimeShow.value = true
  }

  //关闭时间 修改弹窗
  function closeOrderTime() {
    orderTimeShow.value = false
  }

  //修改订单时间
  function orderTimeFn() {
    get({
      url: updateTime,
      data: () => {
        return {
          id: detail.value.id,
          effectiveTime: detail.value.effectiveTime,
          expirationTime: detail.value.expirationTime,
          effectiveState: detail.value.effectiveState,
          flowReal: detail.value.flowReal,
          flowVirtual: detail.value.flowVirtual,
          switchOperator: detail.value.switchOperator,
          remarks: detail.value.remarks ? detail.value.remarks : '',
        }
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        closeOrderTime()
        cardSeachFna()
      }
    })
  }
  function changeTimeFn1111(value: any) {
    console.log(value)
    var objs: { effectiveDate: any; expiryDate: any }
    if (value.validityType == 0 && value.effectiveState === 2) {
      objs = {
        effectiveDate: value.effectiveTime,
        expiryDate: value.expirationTime,
      }
    } else if (
      value.validityType == 1 &&
      (value.effectiveState === 1 || value.effectiveState === 2)
    ) {
      objs = useCommon.calculateEffectiveAndExpiryDates(
        value.createTime,
        value.validity,
        value.validityType,
        value.effectiveState,
        value.validityRule == 0 || value.validityRule == 1 ? value.validityRule : '',
        value.validityMore ? value.validityMore : false
      )
    } else {
      objs = {
        effectiveDate: value.effectiveTime,
        expiryDate: value.expirationTime,
      }
    }
    detail.value.effectiveTime = objs.effectiveDate
    detail.value.expirationTime = objs.expiryDate
  }
  function changeTimeFns(value: any) {
    console.log(value.expirationTime)
    var obj: { effectiveDate: any; expiryDate: any }
    obj = {
      effectiveDate: value.effectiveTime,
      expiryDate: value.expirationTime,
    }
    get({
      url: updateTime,
      data: () => {
        return {
          id: value.id,
          effectiveTime: obj.effectiveDate,
          expirationTime: obj.expiryDate,
          effectiveState: value.effectiveState,
        }
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        cardSeachFna()
      }
    })
  }
  //修改订单时间
  function changeTimeFn(value: any) {
    console.log(value.expirationTime)
    var obj: { effectiveDate: any; expiryDate: any }
    if (value.validityType == 0 && value.effectiveState === 2) {
      obj = {
        effectiveDate: value.effectiveTime,
        expiryDate: value.expirationTime,
      }
    } else if (
      value.validityType == 1 &&
      (value.effectiveState === 1 || value.effectiveState === 2)
    ) {
      obj = useCommon.calculateEffectiveAndExpiryDates(
        value.createTime,
        value.validity,
        value.validityType,
        value.effectiveState,
        value.validityRule == 0 || value.validityRule == 1 ? value.validityRule : '',
        value.validityMore ? value.validityMore : false
      )
      console.log(obj)
    } else {
      obj = {
        effectiveDate: value.effectiveTime,
        expiryDate: value.expirationTime,
      }
    }
    get({
      url: updateTime,
      data: () => {
        return {
          id: value.id,
          effectiveTime: obj.effectiveDate,
          expirationTime: obj.expiryDate,
          effectiveState: value.effectiveState,
        }
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        cardSeachFna()
      }
    })
  }

  function remarkClose() {
    remarkRef.value?.resetFields()
    remarkV.value = false
  }

  function remarkAdd() {
    if (cardRemarks.value == cardDetail.value.remarks) {
      return false
    }
    formpost({
      url: '/app/card/update/card/remarks',
      data: () => {
        return { id: cardDetail.value.id, remarks: cardRemarks.value }
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        cardSeachFna()
      }
    })
  }

  function remarkSub() {
    if (cardDetail.value.id) {
      remarkRef.value?.validate().then((error: any) => {
        if (!error) {
          get({
            url: '/app/coupon/order/batch/add',
            data: () => {
              return { ...couponForm.value }
            },
          }).then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              cardSeachFna()
              couponOrderdoRefresh()
              remarkClose()
            }
          })
        }
      })
    }
  }

  function change() {
    show.value = !show.value
  }
  const routerType = ref(false)

  onMounted(() => {
    // console.log(history)
    // console.log(window.location.pathname.includes('?card='))
    // if (history.state.current.includes('?card=')) {
    //   cardNum.value = getCardParam(
    //     window.location.protocol + '//' + window.location.host + history.state.current
    //   )
    //   cardSeachFn()
    // } else {
    console.log(localStorage.getItem('devices'))
    if (localStorage.getItem('devices') !== null && localStorage.getItem('devices') !== undefined) {
      loaclCard.value = JSON.parse(localStorage.getItem('devices'))
      cardNum.value = loaclCard.value[0].card
      cardSeachFn()
    }
    // }
    if (window.location.pathname.split('/')[1] != 'oneCards') {
      routerType.value = false
    } else {
      routerType.value = true
    }
    getTypeList()
    // line()
  })
  function getCardParam(url: any) {
    const params = new URLSearchParams(new URL(url).search)
    return params.get('card')
  }

  //页面跳转
  function channelRoute() {
    router.push({ name: '渠道列表', state: { name: cardDetail.value.series.channel.name } })
  }

  function seriesRoute() {
    router.push({ name: '系列列表', state: { name: cardDetail.value.series.name } })
  }

  function tipFn() {
    if (localStorage.getItem('devices')) {
      loaclCard.value = JSON.parse(localStorage.getItem('devices'))
    }

    if (loaclCard.value.length > 0) {
      showTip.value = true
    }
  }

  watch(
    () => showTip.value,
    (newVal) => {
      console.log(newVal)
      if (newVal) {
        var popup = document.getElementById('popup') // 获取弹窗元素
        document.addEventListener('click', function (event) {
          var targetElement = event.target // 获取点击的目标元素

          if (targetElement !== popup && !popup.contains(targetElement)) {
            showTipClose() // 调用关闭弹窗的函数
          }
        })
      } else {
        document.body.removeEventListener('click', showTipClose)
      }
    }
  )

  function showTipClose() {
    showTip.value = false
  }

  const daiList: any = ref([])

  function changes(val: any) {
    dataList.value = []
    console.log(val)
    if (cardDetail.value.series.channel.api) {
      const includes = checkedValue.value.includes(3)
      if (includes) {
        dataList.value = rebateList.value
      } else {
        checkedValue.value.forEach((item: any) => {
          rebateList.value.forEach((items: any) => {
            if (item == items.effectiveType) {
              dataList.value.push(items)
            }
          })
        })
      }
    } else {
      checkedValue.value.forEach((item: any) => {
        rebateList.value.forEach((items: any) => {
          if (item == items.effectiveType) {
            dataList.value.push(items)
          }
        })
      })
    }
  }

  //卡板矫正
  const jiaozheng = ref(false)
  const correctForm = ref({
    id: '',
    card: '',
    iccid: '',
    apiCard: '',
    realNameCard: '',
    imei: '',
    imsi: '',
  })
  const jiaoRef = ref()
  const loading11 = ref(false)

  function jiaoCFn() {
    jiaoRef.value?.resetFields()
    jiaozheng.value = false
  }

  function jiaozhnegFn() {
    correctForm.value.id = cardDetail.value.id
    jiaozheng.value = true
  }

  //矫正
  function jiaoQue() {
    jiaoRef.value?.validate().then((error: any) => {
      if (!error) {
        loading11.value = true
        formpost({
          url: update,
          data: () => {
            return {
              ...correctForm.value,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success('矫正成功')
              loading11.value = false
              cardNum.value = ''
              cardDetail.value = {
                series: { channel: {} },
                stateName: {},
                user: {
                  parent: [],
                },
                cardRealName: {},
                balance: 0,
              }
              dataList.value = []
              jiaoCFn()
            }
          })
          .catch(() => {
            loading11.value = false
          })
      }
    })
  }

  //历史用量
  const lishi = ref(false)
  const pagination4 = usePagination(doRefreshOperate1)
  const rebateListse1 = ref([])
  const load4 = ref(false)
  const columns4: any = ref([])
  function lishiFn() {
    columns4.value = []
    if (chack2.value == true) {
      columns4.value.push({
        title: '真实已用',
        key: 'realUsed',
      })
    }
    if (chack3.value == true) {
      columns4.value.push({
        title: '真实总已用',
        key: 'totalRealUsed',
      })
    }
    if (chack.value == true) {
      columns4.value.push({
        title: '使用流量',
        key: 'used',
      })
    }
    if (chack1.value == true) {
      columns4.value.push({
        title: '总使用流量',
        key: 'totalUsed',
      })
    }
    if (chack4.value == true) {
      columns4.value.push({
        title: '记录时间',
        key: 'time',
      })
    }
    get({
      url: '/app/card/daily/dosage/line/chart',
      data: {
        cardId: cardDetail.value.id,
      },
    })
      .then((res: any) => {
        if (res.code == 0) {
          // topForm.value = res.data
          let date = new Date()
          const dates = new Date(date)
          dates.setDate(dates.getDate())
          const dateString = dates.toISOString().split('T')[0]
          topForm.value.max = res.data[0].used
          topForm.value.min = res.data[0].used
          topForm.value.total = 0
          res.data.forEach((item) => {
            if (dateTime(item.time) == dateString) {
              topForm.value.today = item.used
            } else {
              topForm.value.today = 0
            }
            if (item.used > topForm.value.max) {
              topForm.value.max = item.used
            }
            if (item.used < topForm.value.max) {
              topForm.value.min = item.used
            }
            topForm.value.total = topForm.value.total + item.used
          })
          let list = addDayFn(res.data)
          var hour: any = []
          var value: any = []
          list.forEach((item: any) => {
            hour.push(item.time)
            value.push(Math.floor((item.used / 1024) * 1000) / 1000)
          })
          var chartDom5: any = document.getElementById('opnhggggggggggg')
          var myCharts = echarts.init(chartDom5)
          var options
          options = {
            xAxis: {
              type: 'category',
              data: hour,
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: '{value}G',
              },
            },
            tooltip: {
              trigger: 'axis',
            },
            series: [
              {
                name: '流量',
                data: value,
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0, //右
                    y: 0, //下
                    x2: 0, //左
                    y2: 1, //上
                    colorStops: [
                      {
                        offset: 0,
                        color: '#3491fa', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#E8F7FF', // 100% 处的颜色
                      },
                    ],
                  },
                },
                lineStyle: {
                  normal: {
                    color: '#3491fa',
                  },
                },
              },
            ],
          }

          options && myCharts.setOption(options)
        } else {
          Message.error(res.msg)
        }
      })
      .catch(console.log)
    doRefreshOperate1(1)
    lishiForm.value = {
      addRealUsed: '',
      endRealUsed: '',
    }
    lishi.value = true
  }

  function addDayFn(val: any) {
    let date = new Date()
    var list: any = []
    // val.forEach((item: any) => {
    //   item.name = item.x.slice(5, 10)
    // })
    for (let i = 29; i >= 0; i--) {
      const dates = new Date(date)
      dates.setDate(dates.getDate() - i)
      const dateString = dates.toISOString().split('T')[0] // Format as YYYY-MM-DD
      list.push({
        time: dateString,
        used: 0,
      })
    }
    val.forEach((item: any) => {
      list.forEach((items: any) => {
        if (dateTime(item.time) == items.time) {
          items.used = item.used
        }
      })
    })
    return list
  }

  function changeFn(val: any) {
    if (val == true) {
      columns4.value.splice(2, 0, {
        title: '使用流量',
        key: 'used',
      })
    } else {
      columns4.value.forEach((item: any, index: any) => {
        if (item.title == '使用流量') {
          columns4.value.splice(index, 1)
        }
      })
    }
  }
  function changeFn1(val: any) {
    if (val == true) {
      columns4.value.splice(3, 0, {
        title: '总使用流量',
        key: 'totalUsed',
      })
    } else {
      columns4.value.forEach((item: any, index: any) => {
        if (item.title == '总使用流量') {
          columns4.value.splice(index, 1)
        }
      })
    }
  }
  function changeFn2(val: any) {
    if (val == true) {
      columns4.value.splice(0, 0, {
        title: '真实已用',
        key: 'realUsed',
      })
    } else {
      columns4.value.forEach((item: any, index: any) => {
        if (item.title == '真实已用') {
          columns4.value.splice(index, 1)
        }
      })
    }
  }
  function changeFn3(val: any) {
    if (val == true) {
      columns4.value.splice(1, 0, {
        title: '真实总已用',
        key: 'totalRealUsed',
      })
    } else {
      columns4.value.forEach((item: any, index: any) => {
        if (item.title == '真实总已用') {
          columns4.value.splice(index, 1)
        }
      })
    }
  }
  function changeFn4(val: any) {
    if (val == true) {
      columns4.value.splice(4, 0, {
        title: '记录时间',
        key: 'time',
      })
    } else {
      columns4.value.forEach((item: any, index: any) => {
        if (item.title == '记录时间') {
          columns4.value.splice(index, 1)
        }
      })
    }
  }
  function dateTime(val: any) {
    // 时间戳
    let timestamp = val + ''
    // 此处时间戳以毫秒为单位
    let GMT =
      timestamp.substring(0, 4) + '-' + timestamp.substring(4, 6) + '-' + timestamp.substring(6, 8)

    return GMT
  }
  function doRefreshOperate1(value?: any) {
    load4.value = true
    if (value) {
      pagination4.page = value
    }
    get({
      url: dosage,
      data: {
        cardId: cardDetail.value.id,
        addRealUsed: lishiForm.value.addRealUsed,
        endRealUsed: lishiForm.value.endRealUsed,
        page: pagination4.page,
        size: pagination4.pageSize,
      },
    })
      .then((res) => {
        load4.value = false
        rebateListse1.value = res.data.list
        pagination4.setTotalSize((res.data as any).totalSize)
      })
      .catch(() => {
        load4.value = false
      })
  }

  //其他设置
  const pagination = usePagination(doRefresh)
  const pagination1 = usePagination(doRefresh1)
  const pagination2 = usePagination(doRefresh2)
  const tableLoading = ref(false)
  const tableLoading1 = ref(false)
  const tableLoading2 = ref(false)
  const columns_userRecharge = [
    {
      title: '操作账号',
      dataIndex: 'adminName',
      key: 'adminName',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '被操作账号',
      dataIndex: 'userName',
      key: 'userName',
      ellipsis: true,
      tooltip: true,
    },
    {
      title: '变更时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 190,
    },
  ]
  const columns_usermeal = [
    {
      title: '操作账号',
      dataIndex: 'userName',
      key: 'userName',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '变更时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 190,
    },
  ]
  const columns_userfy = [
    {
      title: '操作账号',
      dataIndex: 'adminName',
      key: 'adminName',
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '当前系列',
      dataIndex: 'seriesName',
      key: 'seriesName',
    },
    {
      title: '变更时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 190,
    },
  ]

  function line() {
    if (cardDetail.value.id) {
      get({
        url: dosage,
        data: {
          cardId: cardDetail.value.id,
          addRealUsed: '',
          endRealUsed: '',
          page: 1,
          size: 10,
        },
      }).then((res) => {
        var hour: any = []
        var value: any = []
        res.data.list.forEach((item: any) => {
          hour.push(dateTime(item.time))
          value.push(Math.floor((item.used / 1024) * 100) / 100)
        })
        var chartDom5: any = document.getElementById('opnhggggggggggg')
        var myCharts = echarts.init(chartDom5)
        var options
        options = {
          xAxis: {
            type: 'category',
            data: hour.reverse(),
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}G',
            },
          },
          tooltip: {
            trigger: 'axis',
            formatter: '流量 :{c0}G;  ',
          },
          series: [
            {
              name: '流量',
              data: value,
              type: 'line',
              smooth: true,
            },
          ],
        }

        options && myCharts.setOption(options)
      })
      doRefresh1(1)
      doRefresh(1)
      doRefresh2(1)
    }
  }
  const cardList2 = ref([])
  function doRefresh2(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination2.page = value
    }
    const obj = {
      adminId: '', //管理员id
      userId: '', //客户id
      channelId: '', //渠道id
      seriesId: '', //系列id
      addTime: '',
      endTime: '',
      addTotal: '', // 入库开始数量
      endTotal: '', // 入库结束数量
      addSuccess: '', // 开始分配参数成功数量
      endSuccess: '', // 结束分配参数成功数量
      addError: '', //   开始分配参数失败数量
      endError: '', //   结束分配参数失败数量
      card: cardNum.value,
    }
    get({
      url: warehousingList,
      data: {
        ...obj,
        page: pagination2.page,
        size: pagination2.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      cardList2.value = res.data.list
      pagination2.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }
  const cardList = ref([])
  function doRefresh(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    const obj = {
      adminId: '', //管理员id
      channelId: '', //渠道id
      seriesId: '', //系列id
      addTotal: '', // 入库开始数量
      endTotal: '', // 入库结束数量
      addSuccess: '',
      endSuccess: '',
      addError: '',
      endError: '',
      addTime: '',
      endTime: '',
      userId: '',
      card: cardNum.value,
    }
    get({
      url: distributionAdminList,
      data: {
        ...obj,
        page: pagination.page,
        size: pagination.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      cardList.value = res.data.list
      pagination.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }
  const cardList1 = ref([])
  function doRefresh1(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination1.page = value
    }
    const obj = {
      adminId: '', //管理员id
      channelId: '', //渠道id
      seriesId: '', //系列id
      addTotal: '', // 入库开始数量
      endTotal: '', // 入库结束数量
      addSuccess: '',
      endSuccess: '',
      addError: '',
      endError: '',
      addTime: '',
      endTime: '',
      userId: '',
      card: cardNum.value,
    }
    get({
      url: recoveryAdminList,
      data: {
        ...obj,
        page: pagination1.page,
        size: pagination1.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      cardList1.value = res.data.list
      pagination1.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }

  function cell(val: any) {
    cardNum.value = val.card
    cardSeachFn()
    showTipClose()
  }
  //智能检测
  const detectionVisible = ref(false)
  function openDetection() {
    if (cardDetail.value.id) {
      detectionVisible.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }
  //退款
  const detail: any = ref({
    obj: {
      totalTraffic: '',
      usedTraffic: '',
      remainingTraffic: '',
      remainingRatio: '',
    },
  })
  const visibles = ref(false)
  const details = ref()
  const detailFns = (val: any) => {
    visibleDetail.value = false
    if (val.state == 4) {
      Message.error('当前订单已退款')
    } else {
      console.log(val)
      val.refundAmount = 0
      val.obj = {
        totalTraffic: '',
        usedTraffic: '',
        remainingTraffic: '',
        remainingRatio: '',
      }
      detail.value = val
      console.log(detail.value)
      if (detail.value.payType == 0) {
        detail.value.typeName = '余额'
      } else if (detail.value.payType == 1) {
        detail.value.typeName = '支付宝'
      } else if (detail.value.payType == 2) {
        detail.value.typeName = '微信'
      } else if (detail.value.payType == 3) {
        detail.value.typeName = '接口'
      } else if (detail.value.payType == 4) {
        detail.value.typeName = '批量'
      }
      if (detail.value.flowVirtualType == 1) {
        detail.value.obj = calculateRemainingTraffic(
          val.flowReal ? val.flowReal : 0,
          val.flowUsedVirtual ? val.flowUsedVirtual : 0
        )
      } else if (detail.value.flowVirtualType == 0) {
        detail.value.obj = calculateRemainingTraffic(
          val.flowVirtual ? val.flowVirtual : 0,
          val.flowUsedVirtual ? val.flowUsedVirtual : 0
        )
      } else {
        detail.value.obj = calculateRemainingTraffic(
          val.flowReal ? val.flowReal : 0,
          val.flowUsedVirtual ? val.flowUsedVirtual : 0
        )
      }

      detail.value.refundAmount = val.paymentAmount
      detail.value.balance = ''
      detail.value.deductionAmount = ''
      detail.value.recovery = true
      visibles.value = true
    }
  }

  function calculateRemainingTraffic(totalTraffic, usedTraffic) {
    const remainingTraffic = totalTraffic - usedTraffic
    let remainingRatio
    if (totalTraffic === 0) {
      remainingRatio = '0%'
    } else {
      remainingRatio = (remainingTraffic / totalTraffic) * 100
      remainingRatio = remainingRatio === 0 ? '0%' : Math.round(remainingRatio * 100) / 100 + '%'
    }

    function convertTraffic(traffic) {
      if (traffic === 0) {
        return '0M'
      }
      if (traffic >= 1024) {
        return Math.round((traffic / 1024) * 100) / 100 + 'G'
      }
      return Math.round(traffic * 100) / 100 + 'M'
    }

    return {
      totalTraffic: convertTraffic(totalTraffic),
      usedTraffic: convertTraffic(usedTraffic),
      remainingTraffic: convertTraffic(remainingTraffic),
      remainingRatio,
    }
  }

  const beforeClose = () => {
    detail.value.refundAmount = ''
    details.value.resetFields()
    visibles.value = false
  }
  const refundFn = (val: any) => {
    Modal.warning({
      hideCancel: false,
      titleAlign: 'start',
      title: '确认退款',
      content: '确认执行此操作？',
      onOk: () => {
        formpost({
          url: RefundS,
          data: () => {
            return {
              id: detail.value.id,
              recovery: detail.value.recovery,
              refundAmount: detail.value.refundAmount,
              refundRemarks: detail.value.refundRemarks,
              refundType: val,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              beforeClose()
              cardSeachFna()
            }
          })
          .catch(console.log)
      },
      onCancel: () => {},
    })
  }

  //卡板日志
  const logType = ref(1)
  const caozuo = ref(false)
  //修改系列
  const exportExcelList = () => {
    loadings.value = true
    useCommon
      .downLoads(
        exportRecordAssignmentList,
        { parentId: idModify.value, success: successModify.value },
        '参数分配日志详情列表'
      )
      .then(() => {
        loadings.value = false
      })
      .catch(() => {
        loadings.value = false
      })
  }
  const successModify = ref()
  const cardModifyLoading = ref(false)
  const paginationModifyInfo = usePagination(cardModifyListFn)
  function cardModifyListFn() {
    cardModifyLoading.value = true
    get({
      url: recordtAssignmentList,
      data: {
        parentId: idModify.value,
        success: successModify.value,
        page: paginationModifyInfo.page,
        size: paginationModifyInfo.pageSize,
      },
    }).then((res) => {
      cardModifyLoading.value = false
      cardModifyList.value = res.data.list
      paginationModifyInfo.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }
  const idModify = ref()
  const visibleModify = ref()
  const cardModifyList = ref([])
  const detailModify = async (val: any, val1: any) => {
    await (paginationModifyInfo.page = 1)
    await (cardModifyList.value = [])
    await (idModify.value = val)
    await (successModify.value = val1)
    await cardModifyListFn()
    await (visibleModify.value = true)
  }
  const modifyColumns: any = reactive({
    list: [
      {
        title: '公司账号',
        key: 'userName',
        dataIndex: 'userName',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '新系列',
        key: 'seriesName',
        dataIndex: 'seriesName',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '修改数量',
        key: 'total',
        dataIndex: 'total',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '成功数量',
        key: 'success',
        dataIndex: 'success',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '失败数量',
        key: 'error',
        dataIndex: 'error',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '修改备注',
        key: 'remarks',
        dataIndex: 'remarks',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '修改时间',
        key: 'createTime',
        dataIndex: 'createTime',
        align: 'center',
        checked: true,
        width: 190,
      },
    ],
    cardList: [
      {
        title: '显示卡号',
        key: 'card',
        dataIndex: 'card',
        align: 'center',
        checked: true,
        width: 100,
      },
      {
        title: '旧系列',
        key: 'seriesName',
        dataIndex: 'seriesName',
        align: 'center',
        checked: true,
        width: 100,
      },
    ],
  })
  const modifyList: any = ref([])
  const modifyLoad = ref(false)
  const paginationModify = usePagination(modifyRefresh)
  function modifyRefresh(value?: number) {
    modifyLoad.value = true
    if (value) {
      paginationModify.page = value
    }
    get({
      url: assignmentList,
      data: {
        card: cardNum.value,
        page: paginationModify.page,
        size: paginationModify.pageSize,
      },
    }).then((res) => {
      modifyLoad.value = false
      modifyList.value = res.data.list
      paginationModify.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }
  //回收
  const recycleLoad = ref(false)
  const recycleList: any = ref([])
  const paginationRecycle = usePagination(recycleRefresh)
  function recycleRefresh(value?: number) {
    recycleLoad.value = true
    if (value) {
      paginationRecycle.page = value
    }
    get({
      url: recoveryAdminList,
      data: {
        card: cardNum.value,
        page: paginationRecycle.page,
        size: paginationRecycle.pageSize,
      },
    }).then((res) => {
      recycleLoad.value = false
      recycleList.value = res.data.list
      paginationRecycle.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }
  //分销
  const retailLoad = ref(false)
  const retailList: any = ref([])
  const paginationRetail = usePagination(retailRefresh)
  function retailRefresh(value?: number) {
    retailLoad.value = true
    if (value) {
      paginationRetail.page = value
    }
    get({
      url: distributionAdminList,
      data: {
        card: cardNum.value,
        page: paginationRetail.page,
        size: paginationRetail.pageSize,
      },
    }).then((res) => {
      retailLoad.value = false
      retailList.value = res.data.list
      paginationRetail.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }

  //操作
  const rebateListse = ref([])
  const pagination3 = usePagination(doRefreshOperate)
  const load3 = ref(false)
  const columns3 = [
    {
      title: '操作来源',
      key: 'source',
      width: 120,
    },

    {
      title: '操作类型',
      key: 'type',
      width: 120,
    },
    {
      title: '操作状态',
      key: 'success',
      width: 120,
    },
    {
      title: '操作说明',
      key: 'message',
      width: 300,
    },
    {
      title: '失败原因',
      key: 'error',
      width: 300,
    },
    {
      title: '操作时间',
      key: 'time',
      width: 190,
    },
  ]
  function caozuoFn() {
    if (cardDetail.value.id) {
      doRefreshOperate(1)
      logType.value = 1
      caozuo.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }
  function doRefreshOperate(value?: any) {
    load3.value = true
    if (value) {
      pagination3.page = value
    }
    get({
      url: getOperationList,
      data: () => {
        return {
          page: pagination3.page,
          size: pagination3.pageSize,
          cardId: cardDetail.value.id,
        }
      },
    })
      .then((res) => {
        load3.value = false
        rebateListse.value = res.data.list
        pagination3.setTotalSize((res.data as any).totalSize)
      })
      .catch(() => {
        load3.value = false
      })
  }
  //卡板回收
  const retrieveForms = ref()
  const retrieveLoad = ref(false)
  const retrieveVisible = ref(false)
  const retrieveForm = ref({
    remarks: '',
    cardMultiline: '',
  })

  function openRetrieve() {
    if (cardDetail.value.id) {
      retrieveForm.value.cardMultiline = cardDetail.value.card
      retrieveVisible.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }

  function handleCancelRetrieve() {
    retrieveForms.value?.resetFields()
    retrieveVisible.value = false
  }
  const handleBeforeOkRetrieves = () => {
    retrieveForms.value?.validate().then((error: any) => {
      if (!error) {
        retrieveLoad.value = true
        formpost({
          url: recoveryPostDisOrder,
          data: () => {
            return {
              remarks: retrieveForm.value.remarks,
              cardMultiline: retrieveForm.value.cardMultiline,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              if (res.data.error > 0) {
                Message.error('无法回收此卡')
              } else {
                retrieveLoad.value = false
                Message.success('回收成功')
                cardSeachFna()
                handleCancelRetrieve()
              }
            }
          })
          .catch(() => {
            retrieveLoad.value = false
          })
      }
    })
  }

  //卡板分销
  const huakaForms = ref()
  const huakavisible = ref(false)
  const huankaLoad = ref(false)
  const huakaForm: any = reactive({
    addCard: '',
    endCard: '',
    remarks: '',
    userId: '',
    cardMultiline: '',
  })
  const userList: any = ref([])
  const delimitation = () => {
    if (cardDetail.value.id) {
      getList()
      huakaForm.cardMultiline = cardDetail.value.card
      huakavisible.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }
  function getList() {
    useCommon.userLists().then((res: any) => {
      userList.value = res.data
    })
  }
  function handleCancelhuaka() {
    huakaForms.value?.resetFields()
    huakavisible.value = false
    huankaLoad.value = false
  }
  const handleBeforeOkhuakas = () => {
    huakaForms.value?.validate().then((error: any) => {
      if (!error) {
        huankaLoad.value = true
        formpost({
          url: postDisOrder,
          data: () => {
            return {
              userId: huakaForm.userId,
              remarks: huakaForm.remarks,
              cardMultiline: huakaForm.cardMultiline,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              if (res.data.error > 0) {
                Message.error('请先回收此卡，再执行此操作')
              } else {
                Message.success('划卡成功')
                cardSeachFna()
                huankaLoad.value = false
                handleCancelhuaka()
              }
            }
          })
          .catch(() => {
            huankaLoad.value = false
          })
      }
    })
  }
  //修改系列
  const parameterVisible = ref(false)
  const parameterForms = ref()
  const parameterForm = ref({
    addCard: '',
    endCard: '',
    remarks: '',
    seriesId: '',
    cardMultiline: '',
  })
  const series: any = ref([])
  const loadingsa = ref(false)
  function getseries() {
    useCommon.seriess().then((res: any) => {
      series.value = res.data
    })
  }
  function openParameter() {
    if (cardDetail.value.id) {
      getseries()
      parameterVisible.value = true
      parameterForm.value.cardMultiline = cardDetail.value.card
    } else {
      Message.error('请先搜索卡号')
    }
  }
  function handleCancelParameter() {
    parameterForms.value?.resetFields()
    parameterVisible.value = false
    loadings.value = false
  }
  const handleBeforeOkParameters = () => {
    parameterForms.value?.validate().then((error: any) => {
      if (!error) {
        loadingsa.value = true
        formpost({
          url: parameterPostDisOrder,
          data: () => {
            return {
              seriesId: parameterForm.value.seriesId,
              remarks: parameterForm.value.remarks,
              cardMultiline: parameterForm.value.cardMultiline,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success('修改成功')
              loadingsa.value = false
              cardSeachFna()
              handleCancelParameter()
            }
          })
          .catch(() => {
            loadingsa.value = false
          })
      }
    })
  }
  //卡板注销
  const cancelForm: any = reactive({
    cardMultiline: '',
    cancellationGroupId: '',
  })
  const cancelRef = ref()
  const cancelVisible = ref(false)
  const cancelloading = ref(false)
  const cancelMold: any = ref([])
  function cancelCFn() {
    cancelRef.value?.resetFields()
    cancelVisible.value = false
    cancelloading.value = false
  }

  const getCancelClas = () => {
    get({
      url: getCancelClass,
    }).then((res: any) => {
      cancelMold.value = res.data
    })
  }

  function cancelCFns() {
    if (cardDetail.value.id) {
      getCancelClas()
      cancelForm.cardMultiline = cardDetail.value.card
      cancelVisible.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }

  function cancelSub() {
    cancelRef.value?.validate().then((error: any) => {
      if (!error) {
        cancelloading.value = true
        formpost({
          url: updateCancelLise + '?cancellationGroupId=' + cancelForm.cancellationGroupId,
          data: () => {
            return {
              cardMultiline: cancelForm.cardMultiline,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              cancelloading.value = false
              cardSeachFna()
              cancelCFn()
            }
          })
          .catch(() => {
            cancelloading.value = false
          })
      }
    })
  }
  //修改密码
  const passWordRef = ref()
  const passWordVisible = ref(false)
  const passWordForm: any = ref({})
  function passWordCFn() {
    passWordRef.value?.resetFields()
    passWordVisible.value = false
  }
  function passWordFn() {
    if (cardDetail.value.id) {
      passWordForm.value.id = cardDetail.value.id
      passWordVisible.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }

  function passWordSub() {
    passWordRef.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        formpost({
          url: passWord,
          data: () => {
            return {
              id: passWordForm.value.id,
              passWord: md5(passWordForm.value.passWord),
            }
          },
        })
          .then((res: any) => {
            if (res.code == 0) {
              Message.success('修改成功')
              loadings.value = false
              passWordCFn()
              cardSeachFna()
            }
          })
          .catch(() => {
            loadings.value = false
          })
      }
    })
  }
  //充值余额
  const balanceRef = ref()
  const balanceVisible = ref(false)
  const balanceForm = ref({
    id: '',
    balance: '',
    type: 0,
    remark: '',
    balance1: '',
  })
  const loadings = ref(false)
  function balanceCFn() {
    balanceRef.value?.resetFields()
    loadings.value = false
    balanceVisible.value = false
  }

  function balanceFn() {
    if (cardDetail.value.id) {
      balanceForm.value.id = cardDetail.value.id
      balanceForm.value.balance1 = cardDetail.value.balance
      balanceVisible.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }

  function balanceSub() {
    balanceRef.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        formpost({
          url: balance,
          data: () => {
            return {
              id: balanceForm.value.id,
              balance: balanceForm.value.balance,
              type: balanceForm.value.type,
              remarks: balanceForm.value.remark,
            }
          },
        })
          .then((res: any) => {
            if (res.code == 0) {
              Message.success('修改成功')
              loadings.value = false
              balanceCFn()
              cardSeachFna()
            }
          })
          .catch(() => {
            loadings.value = false
          })
      }
    })
  }

  //充值记录
  const load1 = ref(false)
  const rebateList = ref([])
  const orderVisible = ref(false)
  const columns1 = [
    {
      title: '套餐名称',
      key: 'setMealName',
      width: 120,
    },
    {
      title: '订单时间',
      key: 'effectiveState',
      width: 120,
    },
    {
      title: '充值途径',
      key: 'payType',
      width: 120,
    },
    {
      title: '生效状态',
      key: 'effectiveType',
      width: 120,
    },
    {
      title: '订单状态',
      key: 'state',
      width: 120,
    },
    {
      title: '充值时间',
      key: 'createTime',
      width: 190,
    },
    {
      title: '充值金额',
      key: 'paymentAmount',
      width: 150,
    },
  ]

  function doRefreshOrder() {
    if (cardDetail.value.id) {
      orderVisible.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }
  //删除记录
  function delOrder(val: any) {
    Modal.warning({
      hideCancel: false,
      titleAlign: 'start',
      title: '确认删除',
      content: '确认删除此订单？',
      onOk: () => {
        get({
          url: deleteorder,
          data: () => {
            return {
              id: val.id,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              visibleDetail.value = false
              Message.success(res.msg)
              cardSeachFna()
            }
          })
          .catch(console.log)
      },
      onCancel: () => {},
    })
  }

  function orderCFn() {
    load1.value = false
    orderVisible.value = false
  }

  //充值套餐
  const mealList: any = ref([])
  const mealVisible = ref(false)
  const mealRef = ref()
  const mealForm = ref({
    cardId: '',
    next: 0,
    setMealId: '',
    upstream: 1,
    remarks: '',
  })
  const mealLoad = ref(false)

  //更新数据
  function cardSeachFna() {
    get({
      url: '/app/device/single',
      data: {
        card: cardDetail.value.card,
      },
    })
      .then((res) => {
        if (res.code == 0) {
          cardRemarks.value = ''
          if (res.data.remarks) {
            cardRemarks.value = res.data.remarks
          } else {
            res.data.remarks = ''
          }
          orderType.value = '0'
          let obj = {
            card: cardNum.value,
            time: useCommon.formatDateTime(new Date()),
          }
          if (res.data.user) {
            if (res.data.user) {
              res.data.user.parent.reverse()
            }
          }
          // localStorage.removeItem('cards')
          loaclCard.value.forEach((item, index) => {
            if (item.card == obj.card) {
              loaclCard.value.splice(index, 1)
            }
          })
          loaclCard.value.unshift(obj)
          localStorage.setItem('devices', JSON.stringify(loaclCard.value))
          showTipClose()
          useCommon.state.forEach((val: any) => {
            if (val.state == res.data.state) {
              res.data.stateName = val
            }
          })
          dataList.value = []
          time.value = ''
          res.data.number1 = 0
          res.data.number2 = 0
          res.data.number3 = 0
          if (res.data.series.channel.api) {
            dataList.value = []
            const includes = checkedValue.value.includes(3)
            console.log(includes)
            res.data.cardOrders.forEach((items: any) => {
              if (items.effectiveType == 1) {
                time.value = items.expirationTime
              }
              if (includes) {
                dataList.value.push(items)
              } else {
                if (items.effectiveType == 1) {
                  dataList.value.push(items)
                }
              }
            })
          } else {
            checkedValue.value.forEach((item: any) => {
              res.data.cardOrders.forEach((items: any) => {
                if (item == items.effectiveType) {
                  dataList.value.push(items)
                }
                if (items.effectiveType == 1) {
                  time.value = items.expirationTime
                }
              })
            })
            daiList.value = []
            res.data.cardOrders.forEach((items: any) => {
              if (items.effectiveType == 0) {
                daiList.value.push(items)
                res.data.number3++
              }
              if (items.effectiveType == 1) {
                res.data.number1++
              }
              if (items.effectiveType == 2) {
                res.data.number2++
              }
            })
          }

          rebateList.value = res.data.cardOrders
          if (res.data.exceptionType) {
            useCommon.error.forEach((val: any) => {
              if (val.state == res.data.exceptionType) {
                res.data.errorName = val.name
                res.data.exceptionForm = val
              }
            })
          }
          if (res.data.used == 0) {
            res.data.bai = 0
          } else {
            res.data.bai = Math.floor((res.data.realUsed / res.data.used) * 100) / 100
          }
          if (res.data.series.shutdownEarly && res.data.series.shutdownEarlyType != null) {
            if (res.data.expirationTime) {
              const num = useCommon.getTimeDifferences1(
                res.data.expirationTime,
                res.data.series.shutdownEarlyType
              )
              if (num <= res.data.series.shutdownEarly) {
                res.data.chong = '未提前续费套餐停机'
              } else {
                res.data.chong = ''
              }
            } else {
              res.data.chong = ''
            }
          }
          // 创建一个以 slot 为键的对象映射
          const cardSlotArr = res.data.wifiDevice.wifiDeviceScheme.cardSlotArr
          const slotOperatorMap: Record<string, string | undefined> = {}
          cardSlotArr.forEach((element: any) => {
            slotOperatorMap[element.slot] = element.operator
          })

          // 在用运营商
          const currentSlot = res.data.wifiDevice.slot
          const operator = slotOperatorMap[currentSlot]

          // 默认运营商
          const defaultSlot = res.data.wifiDevice.wifiDeviceScheme.defaultSlot
          const operator1 = slotOperatorMap[defaultSlot]

          res.data.wifiDevice.cards.forEach((item: any) => {
            // 使用对象映射查找 operator
            res.data.wifiDevice.wifiDeviceScheme.cardSlotArr.forEach((element: any) => {
              if (item.slot == element.slot) {
                item.operator = element.operator
              }
            })

            // 设置 cardState
            item.cardState = item.slot === currentSlot ? '使用中' : '未使用'

            // 设置 cardState1
            item.cardState1 = item.slot === defaultSlot ? '默认' : ''
            useCommon.state.forEach((val: any) => {
              if (item.state == val.state) {
                item.stateName = val
              }
            })
          })
          if (res.data.wifiDevice.wifiBand) {
            deviceBandList.value.forEach((items) => {
              if (res.data.wifiDevice.wifiBand == items.key) {
                res.data.wifiDevice.wifiBandName = items.name
              }
            })
          }
          res.data.wifiDevice.operatorId = operator
          res.data.wifiDevice.operatorType1 = operator ? useCommon.getOperatorType(operator) : null
          res.data.wifiDevice.operatorType2 = operator1
            ? useCommon.getOperatorType(operator1)
            : null
          cardDetail.value = res.data
        }
      })
      .catch(console.log)
  }

  //套餐充值弹窗
  function mealFn() {
    if (cardDetail.value.id) {
      get({
        url: mealLists,
        data: () => {
          return {
            seriesIds: cardDetail.value.seriesId,
          }
        },
      }).then((res) => {
        if (res.code == 0) {
          mealList.value = res.data
        }
      })
      mealVisible.value = true
    } else {
      Message.error('请先搜索卡号')
    }
  }

  function mealCFn() {
    mealRef.value?.resetFields()
    mealLoad.value = false
    mealVisible.value = false
  }

  function mealSub() {
    mealRef.value?.validate().then((error: any) => {
      if (!error) {
        mealForm.value.cardId = cardDetail.value.id
        mealLoad.value = true
        formpost({
          url: orderpay,
          data: {
            ...mealForm.value,
          },
        })
          .then((res) => {
            if (res.code == 0) {
              mealLoad.value = false
              Message.success('充值成功')
              mealCFn()
              cardSeachFna()
            }
          })
          .catch(() => {
            mealLoad.value = false
          })
      }
    })
  }
  //机卡绑定
  function deleteBindingFn() {
    if (cardDetail.value.id) {
      Modal.warning({
        title: '操作确认',
        content: '确定要机卡重绑吗？',
        cancelText: '取消',
        titleAlign: 'start',
        hideCancel: false,
        okText: '确定',
        onOk: () => {
          get({
            url: deleteBinding,
            data: () => {
              return {
                id: cardDetail.value.id,
              }
            },
          }).then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              cardSeachFna()
            }
          })
        },
      })
    } else {
      Message.error('请先搜索卡号')
    }
  }
  // resetLinkFn重置网络
  function resetLinkFn() {
    if (cardDetail.value.id) {
      Modal.warning({
        title: '操作确认',
        content: '确定要重置此卡网络吗？',
        cancelText: '取消',
        titleAlign: 'start',
        hideCancel: false,
        okText: '确定',
        onOk: () => {
          get({
            url: resetLinks,
            data: () => {
              return {
                id: cardDetail.value.id,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                Modal.warning({
                  title: '操作报文',
                  content: res.msg,
                  cancelText: '取消',
                  titleAlign: 'start',
                  hideCancel: false,
                  okText: '确定',
                  onOk: () => {},
                })
                cardSeachFna()
              }
            })
            .catch(() => {})
        },
      })
    } else {
      Message.error('请先搜索卡号')
    }
  }
  //复机
  function startFn() {
    if (cardDetail.value.id) {
      Modal.warning({
        title: '操作确认',
        content: '确定要恢复此卡吗？',
        cancelText: '取消',
        titleAlign: 'start',
        hideCancel: false,
        okText: '确定',
        onOk: () => {
          startLoad.value = true
          get({
            url: start,
            data: () => {
              return {
                id: cardDetail.value.id,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                Modal.warning({
                  title: '操作报文',
                  content: res.msg,
                  cancelText: '取消',
                  titleAlign: 'start',
                  hideCancel: false,
                  okText: '确定',
                  onOk: () => {},
                })
                startLoad.value = false
                cardSeachFna()
              }
            })
            .catch(() => {
              startLoad.value = false
            })
        },
      })
    } else {
      Message.error('请先搜索卡号')
    }
  }
  //停机
  function stopFn() {
    if (cardDetail.value.id) {
      Modal.warning({
        title: '操作确认',
        content: '确定要停用此卡吗？',
        cancelText: '取消',
        titleAlign: 'start',
        hideCancel: false,
        okText: '确定',
        onOk: () => {
          stopLoad.value = true
          get({
            url: stop,
            data: () => {
              return {
                id: cardDetail.value.id,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                Modal.warning({
                  title: '操作报文',
                  content: res.msg,
                  cancelText: '取消',
                  titleAlign: 'start',
                  hideCancel: false,
                  okText: '确定',
                  onOk: () => {},
                })
                stopLoad.value = false
                cardSeachFna()
              }
            })
            .catch(() => {
              stopLoad.value = false
            })
        },
      })
    } else {
      Message.error('请先搜索卡号')
    }
  }
  const refLoad1 = ref(false)
  const refLoad2 = ref(false)
  const refLoad3 = ref(false)
  //刷新
  function RefreshFn(val?: any) {
    if (cardDetail.value.id) {
      if (val == 0) {
        refLoad1.value = true
      } else if (val == 1) {
        refLoad2.value = true
      } else if (val == 2) {
        refLoad3.value = true
      } else {
        refLoad.value = true
      }
      get({
        url: refresh,
        data: () => {
          return {
            id: cardDetail.value.id,
            type: val,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            if (val == 0) {
              refLoad1.value = false
            } else if (val == 1) {
              refLoad2.value = false
            } else if (val == 2) {
              refLoad3.value = false
            } else {
              refLoad.value = false
            }
            cardSeachFna()
          }
        })
        .catch(() => {
          if (val == 0) {
            refLoad1.value = false
          } else if (val == 1) {
            refLoad2.value = false
          } else if (val == 2) {
            refLoad3.value = false
          } else {
            refLoad.value = false
          }
        })
    } else {
      Message.error('请先搜索卡号')
    }
  }
  const loaclCard: any = ref([])
  const deviceBandList = ref([])
  //查询卡号
  function cardSeachFn() {
    if (cardNum.value) {
      useCommon.deviceBand().then((res) => {
        deviceBandList.value = res.data
      })
      type.value = '0'
      get({
        url: '/app/device/single',
        data: {
          card: cardNum.value,
        },
      })
        .then((res) => {
          if (res.code == 0) {
            cardRemarks.value = ''
            if (res.data.remarks) {
              cardRemarks.value = res.data.remarks
            } else {
              res.data.remarks = ''
            }
            orderType.value = '0'
            let obj = {
              card: cardNum.value,
              time: useCommon.formatDateTime(new Date()),
            }
            if (res.data.user) {
              if (res.data.user) {
                res.data.user.parent.reverse()
              }
            }

            // localStorage.removeItem('cards')
            loaclCard.value.forEach((item, index) => {
              if (item.card == obj.card) {
                loaclCard.value.splice(index, 1)
              }
            })
            loaclCard.value.unshift(obj)
            localStorage.setItem('devices', JSON.stringify(loaclCard.value))
            showTipClose()
            useCommon.state.forEach((val: any) => {
              if (val.state == res.data.state) {
                res.data.stateName = val
              }
            })
            dataList.value = []
            time.value = ''
            res.data.number1 = 0
            res.data.number2 = 0
            res.data.number3 = 0
            if (res.data.series.channel.api) {
              dataList.value = []
              const includes = checkedValue.value.includes(3)
              console.log(includes)
              res.data.cardOrders.forEach((items: any) => {
                if (items.effectiveType == 1) {
                  time.value = items.expirationTime
                }
                if (includes) {
                  dataList.value.push(items)
                } else {
                  if (items.effectiveType == 1) {
                    dataList.value.push(items)
                  }
                }
              })
            } else {
              checkedValue.value.forEach((item: any) => {
                res.data.cardOrders.forEach((items: any) => {
                  if (item == items.effectiveType) {
                    dataList.value.push(items)
                  }
                  if (items.effectiveType == 1) {
                    time.value = items.expirationTime
                  }
                })
              })
              daiList.value = []
              res.data.cardOrders.forEach((items: any) => {
                if (items.effectiveType == 0) {
                  daiList.value.push(items)
                  res.data.number3++
                }
                if (items.effectiveType == 1) {
                  res.data.number1++
                }
                if (items.effectiveType == 2) {
                  res.data.number2++
                }
              })
            }

            rebateList.value = res.data.cardOrders
            if (res.data.exceptionType) {
              useCommon.error.forEach((val: any) => {
                if (val.state == res.data.exceptionType) {
                  res.data.errorName = val.name
                  res.data.exceptionForm = val
                }
              })
            }
            if (res.data.used == 0) {
              res.data.bai = 0
            } else {
              res.data.bai = Math.floor((res.data.realUsed / res.data.used) * 100) / 100
            }
            if (res.data.series.shutdownEarly && res.data.series.shutdownEarlyType != null) {
              if (res.data.expirationTime) {
                const num = useCommon.getTimeDifferences1(
                  res.data.expirationTime,
                  res.data.series.shutdownEarlyType
                )
                if (num <= res.data.series.shutdownEarly) {
                  res.data.chong = '未提前续费套餐停机'
                } else {
                  res.data.chong = ''
                }
              } else {
                res.data.chong = ''
              }
            }
            // 创建一个以 slot 为键的对象映射
            const cardSlotArr = res.data.wifiDevice.wifiDeviceScheme.cardSlotArr
            const slotOperatorMap: Record<string, string | undefined> = {}
            cardSlotArr.forEach((element: any) => {
              slotOperatorMap[element.slot] = element.operator
            })

            // 在用运营商
            const currentSlot = res.data.wifiDevice.slot
            const operator = slotOperatorMap[currentSlot]

            // 默认运营商
            const defaultSlot = res.data.wifiDevice.wifiDeviceScheme.defaultSlot
            const operator1 = slotOperatorMap[defaultSlot]

            res.data.wifiDevice.cards.forEach((item: any) => {
              // 使用对象映射查找 operator
              res.data.wifiDevice.wifiDeviceScheme.cardSlotArr.forEach((element: any) => {
                if (item.slot == element.slot) {
                  item.operator = element.operator
                }
              })

              // 设置 cardState
              item.cardState = item.slot === currentSlot ? '使用中' : '未使用'

              // 设置 cardState1
              item.cardState1 = item.slot === defaultSlot ? '默认' : ''
              useCommon.state.forEach((val: any) => {
                if (item.state == val.state) {
                  item.stateName = val
                }
              })
            })
            res.data.wifiDevice.operatorId = operator
            res.data.wifiDevice.operatorType1 = operator
              ? useCommon.getOperatorType(operator)
              : null
            res.data.wifiDevice.operatorType2 = operator1
              ? useCommon.getOperatorType(operator1)
              : null
            if (res.data.wifiDevice.wifiBand) {
              deviceBandList.value.forEach((items) => {
                if (res.data.wifiDevice.wifiBand == items.key) {
                  res.data.wifiDevice.wifiBandName = items.name
                }
              })
            }
            cardDetail.value = res.data
            Message.success('查询成功')
          }
        })
        .catch(console.log)
    } else {
      Message.error('请先搜索卡号')
    }
  }
  function del(val: any) {
    loaclCard.value.forEach((item, index) => {
      if (item.card == val) {
        loaclCard.value.splice(index, 1)
      }
    })
    localStorage.setItem('devices', JSON.stringify(loaclCard.value))
  }
  //跟踪API开始时间限制结束时间
  function changeTraceEnd(time: any) {
    return time.getTime() > new Date(detail.value.expirationTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStart(time: any) {
    return time.getTime() < new Date(detail.value.createTime).getTime() //小于开始时间的不选
  }
</script>

<style lang="less" scoped>
  :deep(.arco-table-th) {
    background-color: var(--color-bg-2);
  }
  :deep(.arco-table-container) {
    border-radius: 10px;
  }
  :deep(.arco-scrollbar-container) {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .imgsa1 {
    width: 70px;
    height: 70px;
  }
  .imgsa {
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }
  .col-div {
    margin-top: 5px;
    padding: 0 20px;
    margin-bottom: 20px;
  }
  .col-div .arco-col {
    margin-bottom: 10px;
  }
  .padding20 {
    padding: 0 20px;
    .box {
      display: flex;
      align-items: center;
      height: 30px;
      margin: 5px 10px 10px 0px;

      .line {
        width: 4px;
        height: 15px;
        margin-right: 8px;
        background-color: #40a1ff;
      }
      .text {
        display: flex;
        align-items: center;
      }
    }
    .display-box {
      display: flex;
      .display-right {
        margin-left: 20px;
        .text {
          font-size: 14px;
          color: #86909c;
          line-height: 23px;
        }
        .text-name {
          font-size: 15px;
          line-height: 25px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .box-top {
    width: 100%;
    height: 115px;
    border-radius: 10px;
    background-color: #f5f5f5;
    padding: 22.5px;
    display: flex;
    align-items: center;
    .top-item {
      width: 25%;
      height: 70px;
      .title1 {
        line-height: 35px;
        color: #86909c;
        font-size: 16px;
      }
      .num {
        line-height: 35px;
        font-size: 18px;
      }
    }
    .top-items {
      width: 25%;
      border-left: 1px solid #c9cdd4;
      height: 70px;
      padding-left: 22.5px;
      .title1 {
        line-height: 35px;
        color: #86909c;
        font-size: 16px;
      }
      .num {
        line-height: 35px;
        font-size: 18px;
      }
    }
  }
  .timeBox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    .time-box-item {
      display: flex;
      width: calc((100% - 80px) / 5);
      background-color: var(--color-bg-2);
      border-radius: 10px;
      padding: 10px;
      .img {
        width: 20px;
        height: 20px;
      }
      .text {
        margin-left: 10px;
        .blue {
          color: #3491fa;
          font-size: 14px;
        }
        .red {
          color: red;
          font-size: 14px;
        }
        .time {
          font-size: 11px;
          margin-top: 5px;
        }
      }
    }
  }
  :deep(.arco-input-wrapper .arco-input-clear-btn) {
    margin-right: 10px;
  }
  :deep(.arco-collapse-item .arco-collapse-item-icon-right) {
    right: 0;
  }
  :deep(.arco-collapse-item-header-right) {
    padding-right: 20px;
  }
  :deep(.arco-descriptions-border .arco-descriptions-body) {
    border: 0;
  }

  .detail {
    :deep(.arco-scrollbar-container) {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    :deep(.arco-table-container) {
      border-radius: 10px;
    }
    :deep(.arco-table-border .arco-table-scroll-y) {
      border-bottom: 0;
    }
    :deep(.arco-table-pagination) {
      margin-top: 0px;
      background-color: var(--color-fill-1);
    }
    :deep(.arco-table-th) {
      background-color: var(--color-bg-2);
    }
    .box {
      :deep(.arco-radio-button-content) {
        width: 100px;
        line-height: 35px;
        text-align: center;
      }
    }
  }

  :deep(.arco-descriptions-border .arco-descriptions-item-label-block) {
    background-color: transparent;
  }
  :deep(.arco-form-item-status-error .arco-input-wrapper:not(.arco-input-disabled)) {
    margin-bottom: 0px !important;
  }
  :deep(.arco-input-append) {
    padding: 0px;
  }
  :deep(.arco-input-wrapper) {
    padding-right: 0;
    border-radius: 0;
  }
  .ba {
    display: flex;
    align-items: center;
    cursor: pointer;
    .aa {
      font-size: 18px;
      display: none;
    }
  }
  // .input {
  //   :deep(.arco-input-wrapper) {
  //     border: 0;
  //   }
  // }
  :deep(.arco-pagination-item-active, .arco-pagination-item-active:hover) {
    background-color: var(--color-fill-1) !important;
  }

  :deep(.arco-pagination-item-active) {
    color: blue !important;
    background-color: none !important;
  }
  .table {
    .title {
      padding: 0 1px;
      display: flex;
      background-color: var(--color-fill-1);
      .name {
        width: 188px;
        line-height: 45px;
        text-align: center;
        // background-color: var(--color-neutral-4);
      }
    }
    .list {
      box-sizing: border-box;
      display: flex;
      border-bottom: 1px solid var(--color-neutral-3);
      border-left: 1px solid var(--color-neutral-3);
      border-right: 1px solid var(--color-neutral-3);
      .names {
        width: 188px;
        line-height: 45px;
        text-align: center;
      }
      .namesa {
        width: 376px;
        line-height: 45px;
        text-align: center;
      }
    }
  }

  .error {
    margin-left: 10px;
    background-color: var(--color-bg-2);
    line-height: 30px;
    width: 329px;
    border: 1px solid #f53f3f;
    border-radius: 5px;
    padding-left: 10px;
    color: #f53f3f;
    font-size: 14px;
  }

  :deep(.arco-radio-button.arco-radio-checked) {
    background-color: rgb(var(--primary-6));
    color: var(--color-bg-2);
  }

  .right-line {
    :deep(.arco-radio-button-content) {
      width: 200px;
      line-height: 32px;
      text-align: center;
    }
    margin-bottom: 20px;
  }
  :deep(.arco-radio-group-button) {
    // background-color: var(--color-bg-2);
  }

  :deep(.arco-radio-button:hover) {
    background-color: rgb(var(--primary-6));
    color: var(--color-bg-2);
  }
  :deep(.arco-radio-button) {
    margin: 0px;
  }
  :deep(.arco-radio-group-button) {
    padding: 0px;
  }
  .white {
    background-color: #fff;
  }

  .box {
    display: flex;
    align-items: center;
    height: 35px;
    margin-bottom: 20px;
    .text {
      font-size: 15px;
    }

    .line {
      width: 3px;
      height: 15px;
      margin-right: 5px;
      background-color: #40a1ff;
    }
  }

  .box1 {
    display: flex;
    align-items: center;
    height: 15px;
    .text {
      font-size: 15px;
    }

    .line {
      width: 3px;
      height: 15px;
      margin-right: 5px;
      background-color: #40a1ff;
    }
  }

  .detail {
    // padding: 20px;
    // background-color: var(--color-bg-2);
    margin-top: 20px;
    border-radius: 10px;
  }

  .details {
    margin-top: 20px;
    padding: 20px 20px;
    background-color: var(--color-bg-2);
    border-radius: 10px;
    padding-bottom: 0;
  }
  #popup {
    :deep(.arco-input-wrapper) {
      background-color: var(--color-bg-2);
      border-top-right-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
    }
    :deep(.arco-btn) {
      height: 35px;
      border-radius: 0 !important;
      border-top-right-radius: 4px !important;
      border-bottom-right-radius: 4px !important;
    }
    :deep(.arco-input-focus) {
      border-top-right-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
    }
    :deep(.arco-table-pagination) {
      margin-top: 0px;
      background-color: var(--color-fill-1);
      border-bottom-right-radius: 10px !important;
      border-bottom-left-radius: 10px !important;
    }
  }

  :deep(.arco-collapse) {
    border: 0 !important;
    background-color: transparent !important;
  }

  :deep(.arco-collapse-item-header-right + .arco-collapse-item-content) {
    padding-left: 0px !important;
  }
  :deep(.arco-collapse-item-content) {
    padding-right: 0px !important;
    background-color: transparent;
  }
  :deep(.arco-collapse-item-header) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: transparent;
  }

  :deep(.arco-collapse-item-content-box) {
    background-color: transparent;
    padding: 0;
  }

  :deep(.arco-collapse-item-active > .arco-collapse-item-header) {
    border: 0 !important;
  }

  :deep(.arco-collapse-item-header-right) {
    padding-left: 0 !important;
    transition: none;
  }

  .img {
    width: 50px;
    height: 50px;
  }

  .sq {
    width: 85px;
    // border: 1px solid #ebeef5;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
  }

  img {
    vertical-align: bottom;
  }

  .bottomTable {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

    .box_3 {
      min-height: 300px;
      padding: 20px;
      border-radius: 10px;
      background-color: var(--color-bg-2);

      :deep(.bcg) {
        padding: 0px;
      }

      .tops {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .times {
          .noactive {
            color: var(--color-neutral-10);
            margin-left: 10px;
            cursor: pointer;
          }

          .actives {
            color: #3491fa;
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .top {
    background-color: var(--color-bg-2);
    border-radius: 10px;
    padding: 20px;
    .tops {
      width: 100%;
      font-size: 16px;
    }
  }
  #popup {
    position: relative;
  }
  .contex-menu-wrapper {
    position: absolute;
    z-index: 99999;
    top: 32px;
    width: 500px;
    margin-top: 5px;
    border-radius: 10px;
    // background-color: var(--color-neutral-4);
    // border-bottom: 1px solid var(--color-neutral-3);
    // border-left: 1px solid var(--color-neutral-3);
    // border-right: 1px solid var(--color-neutral-3);
    box-shadow: 0 2px 8px #00000026;
  }

  .imgsa {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
  .custom-checkbox-card {
    // border: 1px solid var(--color-border-2);
    border-radius: 4px;
    width: 70px;
    line-height: 32px;
    text-align: center;
    box-sizing: border-box;
    background-color: #f2f3f5;
  }

  .custom-checkbox-card-mask {
    height: 14px;
    width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
  }

  .custom-checkbox-card-mask-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
  }

  .custom-checkbox-card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 15px;
      height: 15px;
      margin-right: 5px;
    }
    color: var(--color-text-1);
    font-size: 14px;
  }

  .custom-checkbox-card:hover,
  .custom-checkbox-card-checked,
  .custom-checkbox-card:hover .custom-checkbox-card-mask,
  .custom-checkbox-card-checked .custom-checkbox-card-mask {
    border-color: rgb(var(--primary-6));
  }

  .custom-checkbox-card-checked {
    border: 1px solid #3491fa;
    line-height: 30px;
    box-sizing: border-box;
    background-color: #e8f7ff;
  }

  .custom-checkbox-card:hover .custom-checkbox-card-title,
  .custom-checkbox-card-checked .custom-checkbox-card-title {
    color: rgb(var(--primary-6));
    border-radius: 5px;
    background-color: #e8f7ff;
  }

  .custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }
</style>
